您的位置：首页 > 其它

gridview checkbox从服务器端和客户端两个方面实现全选和反选

2015-06-25 17:18 120 查看

GridView中的checkbox的全选和反选在很多的地方都是要求实现的，所以下面就从服务器端和客户端两个方面实现了checkbox的选择,感兴趣的朋友可以了解下，希望本文对你有所帮助

GridView中的checkbox的全选和反选在很多的地方都是要求实现的，所以下面就从服务器端和客户端两个方面实现了checkbox的选择。

1.服务器端

html代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#checkAll").click(function () {
if ($(this).prop("checked")) {
$("input[name='selectFlag']:checkbox").prop("checked", true);
} else {
$("input[name='selectFlag']:checkbox").prop("checked", false)
}
});
});
//子复选框的事件
function setSelectAll() {
//当没有选中某个子复选框时，SelectAll取消选中
if (!$("#selectFlag").checked) {
$("#checkAll").attr("checked", false);
}
var chsub = $("input[type='checkbox'][id='selectFlag']").length; //获取subcheck的个数
var checkedsub = $("input[type='checkbox'][id='selectFlag']:checked").length; //获取选中的subcheck的个数
if (checkedsub == chsub) {
$("#checkAll").attr("checked", true);
}
}
</script>
</head>
<body>
<table>
<tr>
<td><input type="checkbox" name="selectFlag" id="checkAll"></td>
</tr>
<tr>
<td><input type="checkbox" name="selectFlag" id="selectFlag" onclick="setSelectAll()"></td>
</tr>
<tr>
<td><input type="checkbox" name="selectFlag" id="selectFlag" onclick="setSelectAll()"></td>
</tr>
<tr>
<td><input type="checkbox" name="selectFlag" id="selectFlag" onclick="setSelectAll()"></td>
</tr>
<tr>
<td><input type="checkbox" name="selectFlag" id="selectFlag" onclick="setSelectAll()"></td>
</tr>
<tr>
<td><input type="checkbox" name="selectFlag" id="selectFlag" onclick="setSelectAll()"></td>
</tr>
</table>
</body>
</html>

View Code

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

标签：

相关文章推荐

新的分享

章节导航