全选全不选主要使用到了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>