html jquery设置复选框全选,全部取消示例,代码如下:
<!DOCTYPE html>
<html>
<head >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery操作checkbox方法 - 全选和取消全选</title>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" >
function hehe() {
var isChecked = $('#haha').prop("checked");
console.log('isChecked = ', isChecked)
$("#haha").each(function() {
console.log('this.checked = ', this.checked)
if (this.checked) {
console.log('------ add ')
selectAll()
console.log('------ add end')
} else {
console.log('------ remove')
selectNone()
console.log('------ remove end')
}
})
}
// function hehe() {
// var isChecked = $('#haha').prop("checked");
// console.log('isChecked = ', isChecked)
//
// $("#haha").each(function() {
// console.log('this.checked = ', this.checked)
//
// if (this.checked) {
// console.log('------ add ')
// selectAll()
// console.log('------ add end')
//
// } else {
// console.log('------ remove')
// selectNone()
// console.log('------ remove end')
//
//
// }
// })
// }
//全选
function selectAll() {
//方法一:
// $("input[name='bjjb']").attr("checked",true);
//方法二:
// $("input[name='bjjb']").each(function(){
// $(this).attr("checked",true);
// });
$("input[name='bjjb']").each(function(){
$(this).prop("checked",true);
});
}
//取消全选
function selectNone(){
//方法一:
// $("input[name='bjjb']").removeAttr("checked");
//方法二:
// $("input[name='bjjb']").each(function(){
// $(this).attr("checked",false);
// });
$("input[name='bjjb']").each(function(){
$(this).prop("checked",false);
});
}
//反选
// function selectInvert() {
// $("input[name='bjjb']").each(function(index,item){
// if ($(this).attr("checked")) {
// $(this).removeAttr("checked");
// } else {
// $(this).attr("checked", true);
// }
// });
// }
// function selectOne() {
// var checked=$("input[name='bjjb']:checked");
// if(checked.length==0){
// alert("请至少选择一个");
// return ;
// }
// $("#checked").html("");
// $("#checkedText").html("");
// $("input[name='bjjb']:checked").each(function () {
// $("#checked").append($(this).val()+",");
// //注意文本一定要元素标签如span否则next得不到值
// $("#checkedText").append($(this).next().text()+",");
// });
//
// }
</script>
</head>
<body>
<form id="" action="" method="post">
<div >
<input type="checkbox" name="bjjb" value="1"/><span>交通事故</span></br>
<input type="checkbox" name="bjjb" value="2"/><span>自然灾害</span></br>
<input type="checkbox" name="bjjb" value="3"/><span>恶劣天气</span></br>
<input type="checkbox" name="bjjb" value="4"/><span>严重违法行为</span></br>
<input type="checkbox" name="bjjb" value="5"/><span>路面损毁</span></br>
</div>
<div style="margin-top:10px;">
<input type="checkbox" id="haha" name="selectAll" onclick="hehe()" value="全选" /> 全选
<!-- <input type="button" onclick="selectNone()" value="全不选" />-->
</div>
</form>
</body>
</html>