全选全不选
界面：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<input type="checkbox" id="checkall" />全选/全不选
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="游泳" />游泳
<input type="checkbox" name="items" value="唱歌" />唱歌
<input type="checkbox" name="items" value="读书" />读书
<br/>
<input type="button" id="checkall_1" value="全选"/>
<input type="button" id="checkno" value="全不选"/>
<input type="button" id="checkarev" value="反选"/>
<input type="button" id="send" value="提交"/>
<script type="text/javascript">
//全选全不选
$(document).ready(function(){
$("#checkall").click(function(){
if (($("#checkall").prop("checked"))){
$(":input[name='items']").attr("checked",true);
}else{
$(":input[name='items']").attr("checked",false);
}
});
});
//全选
$(document).ready(function(){
$("#checkall_1").click(function(){
$(":input[name='items']").attr("checked",true);
});
});
//全不选
$(document).ready(function(){
$("#checkno").click(function(){
//方式一
$(":input[name='items']").attr("checked",false);
//方式二
// $("input[name='checkbox']").removeAttr("checked");
});
});
//反选
$(document).ready(function(){
$("#checkarev").click(function(){
$("input[name='items']").each(function(){
//attr
//1.attr("checked"):返回被选中元素的属性值
//2.attr("checked",true)：设置选中属性
if (this.checked) {
$(this).prop("checked",false);
}else{
$(this).prop("checked",true);
}
});
});
});
</script>
</body>
</html>