您的位置：首页 > Web前端 > JQuery

Jquery实现全选中全不选中以及获取选中行的相关值

2016-04-13 14:15 405 查看

全选全不选主要使用到了jquery的遍历。

获取选中值也是用到了当前元素与要获取值元素之间的关系（后代，同胞什么的）

下面为参考代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
</head>
<body>
<table id="checkTable">
<tHead>
<tr>
<td><input type="checkbox" name="selectAll"/></td>
<td>ID</td>
</tr>
</tHead>
<tbody>
<tr>
<td><input type="checkbox" name="select"/></td>
<td>20160413</td>
</tr>
<tr>
<td><input type="checkbox" name="select"/></td>
<td>20160414</td>
</tr>
<tr>
<td><input type="checkbox" name="select"/></td>
<td>20160415</td>
</tr>
</tbody>
</table>
<input id="getCheckedIDs" type="button" value="获取选中的ID"/>
</body>
<script>
//全选中，全不选中
$('body').on('click', 'input[type=checkbox][name=selectAll]', function(){
var checkall = $(this);
if (checkall.is(':checked'))
{
$('#checkTable').find('input[type=checkbox][name=select]').prop('checked', true);
}
else
{
$('#checkTable').find('input[type=checkbox][name=select]').prop('checked', false);
}
});

//获取选中的ID值，以逗号连接
$('#getCheckedIDs').click(function(){
var chks = $('#checkTable').find('input[type=checkbox][name=select]:checked');
var devices = '';
for (var i = 0; i < chks.length; i++)
{
var chk = $(chks[i]);
if (devices.length > 0)
{
devices += ",";
}
devices += chk.parent().next().text();
}
alert("IDs:" + devices);
});
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航