点击table行时,默认选中当前行中的复选框
2017-03-04 13:13
495 查看
在table中点击行的时候,选中当前行中的checkbox,也就是在哪行点击,就选中哪行的复选框(其他行的取消选中)
项目使用Bootstrap 创建
以下为完整的代码
项目使用Bootstrap 创建
以下为完整的代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script> $(function() { $('table').on('click', 'tr', function(e){ // 获取table中所有的行 var trs = $(this).parent('tbody').find('tr'); // 取消所有行的选中 $.each(trs, function(index, item) { // 如果在此使用的是attr()设置选中状态,取消后将不能设置为选中 $(item).find('td:eq(0) input').prop('checked', false); }); // 选中当前点击的行 $(this).find('td:eq(0) input').prop('checked',true) }) }); </script> </head> <body> <table class="table table-hover table-striped"> <caption>基本的表格布局</caption> <thead> <tr> <th>#</th> <th>名称</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"/></td> <td>Tanmay</td> <td>Bangalore</td> </tr> <tr> <td><input type="checkbox"/></td> <td>Sachin</td> <td>Mumbai</td> </tr> <tr> <td><input type="checkbox"/></td> <td>Tanmay</td> <td>Bangalore</td> </tr> <tr> <td><input type="checkbox"/></td> <td>Sachin</td> <td>Mumbai</td> </tr> <tr> <td><input type="checkbox"/></td> <td>Tanmay</td> <td>Bangalore</td> </tr> <tr> <td><input type="checkbox"/></td> <td>Sachin</td> <td>Mumbai</td> </tr> <tr> <td><input type="checkbox"/></td> <td>Tanmay</td> <td>Bangalore</td> </tr> <tr> <td><input type="checkbox"/></td> <td>Sachin</td> <td>Mumbai</td> </tr> </tbody> </table> </body> </html>
相关文章推荐
- 百度echarts 日历插件,点击变色,默认选中当前日期
- BootStrap-table 复选框默认选中(checkbox)
- tableview编辑状态下 默认选中cell之后 无法点击取消
- bootstrap-table复选框默认选中。(从数据库获取到对应的状态进行判断是否为选中状态)
- BootStrap-table 复选框默认选中(checkbox)
- jQuery注册表格(table)行(tr)点击选中checkbox事件
- 关于分页选中复选框的基本思想(默认全选)
- 关于安卓APP底栏点击第一次选中当前Fragment第二次点击更新当前页面的问题(思路)
- bootstrap-table 复选框的操作,如提前选中,是否可选等
- 点击文字选中的单选和复选框
- 点击文字选中单选框或复选框
- 有一个table表格,选中某一行后,点击“查看(button)”按钮可以实现对该行内容的显示
- iOS 点击TableView 记录当前cell 当pop 回到页面时停留在之前点击的cell
- 杂记c-----小写金额转化成大写数字;点击表格table时,当前被点击的tr行变色,其它行不变色;input隐藏显示
- 复选框选中后,点击删除按钮,只删除选中的复选框
- layui从数据库中获取复选框的值并默认选中方法
- 将table中被复选框选中的行的某一列全部放入到某个数组中去
- table分页点击最后一页按钮不是显示剩余条数,而是默认显示每页条数
- 『ANDROID』去除或替换listview 默认的点击选中时的颜色
- select标签以及默认选中当前分类问题