怎么通过简单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实现选中一行的时候,前面的单选框也被选中?的主要内容,如果未能解决你的问题,请参考以下文章