怎么通过简单js/css实现选中一行的时候,前面的单选框也被选中?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么通过简单js/css实现选中一行的时候,前面的单选框也被选中?相关的知识,希望对你有一定的参考价值。

我是用asp.net来制作网页的。 有一个一览表,需要任选某行的任意位置,都能选中该行成为高亮状态,并且第一列的单选框也被选中。现在这一行的高亮实现了,但是怎么让单选框也被选中没有实现。 请问该怎么实现呢?

参考技术A 还是选用jquery来做
给tr加一个click事件
<tr
onclick="myclick(this)"><td>单选框</td>
<td>123</td></tr>
对应js
function
myclick(o)
//获取子节点的第一个节点对象
var
rd
=
$(o).children().first();
rd.checked
=
true;//让该单选按钮选中

望采纳

小程序实现顶部选中效果

一、效果演示

二、功能代码

1.设计思路

1.首先设计完大体框架:

全部、待支付、待发货、已发货、交易成功这五个部分都是单独的view分开来装的,在大的view中有设置了下边框

2.选中的时候通过给选中的view修改样式来实现一个选中效果,需要用js来实现样式的改变

2.相关代码

1.Html代码

<view class="topView" style="position:fixed;top:49px;left:0;z-index:200">
  <block wx:for="{{statusList}}" wx:key="id">
    <view id="{{item.id}}" class="{{item.id == isChecked ? 'active':''}} topChild" bindtap="choiceStatus">{{item.statusName}}</view>
 </block>
</view>

2.CSS代码

.topView{
  width:100%;
  height:48px;
  display:flex;
  background-color: #ffffff;
  border-bottom:1px solid #e2e1e1;
}
.topChild{
  width:20%;
  height:48px;
  text-align: center;
  line-height: 3.4;
  font-size:14px;
  color:#333333;
}
/*点击时按钮状态*/
.active{
  color:#2dbef8;
  border-bottom:2px solid #2dbef8;
}

3.JS代码

Page({
 
  data: {
    statusList: [{//顶部状态按钮
      "statusName": "全部",
      "id": "all"
    },
    {
      "statusName": "待支付",
      "id": "draft"
    },
    {
      "statusName": "待发货",
      "id": "waitSolve"
    },
    {
      "statusName": "已发货",
      "id": "doingSolve"
    },
    {
      "statusName": "交易成功",
      "id": "doneSolve"
    },
    ],
    isChecked: 0 //判断是否选中
  },
  
  //绑定顶部状态切换的点击事件
  choiceStatus: function (e) {
    var that = this;
    var code = e.currentTarget.id;
    that.setData({
      isChecked: code
    })
  },
  
})

3.涉及到的其它知识

1.view的多样式

大家直接看class后面的部分,可以看见class后面不止一个样式类

 <view id="{{item.id}}" class="{{item.id == isChecked ? 'active':''}} topChild" 
 bindtap="choiceStatus">{{item.statusName}}</view>

小结:
1.class中可以包含多个样式,多个样式之间用空格隔开
2. ‘’代表的是空样式

2.wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容,switch 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

比如当前switch是选中状态,如果没有设置wx:key,状态可能会发生改变,所以设置wx:key可以用来保持自己的特征和状态,并且在下次渲染时不会重新创建,提高了列表渲染时的效率。

详细的wx:key参考博客
点我跳转

以上是关于怎么通过简单js/css实现选中一行的时候,前面的单选框也被选中?的主要内容,如果未能解决你的问题,请参考以下文章

CSS/JQuery实现hover的时候播放指定声音

vue 实现单选/多选效果

怎样用css实现div选中的效果

网页中这样的可关闭提示框如何实现?css

css做的菜单,被选中状态的一个效果,很急,希望高手帮忙!!!

求助,怎么通过js获取slickgrid表格中的行数,选中行和一行中的数据