方法一：Prop实现
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src='./jquery.js'></script>
</head>
<body>
用户名： <input type="text" name="username" value='切格瓦拉'> <br>
爱好：
<input type="checkbox" name="hobby[]" value='0'>敲代码
<input type="checkbox" name="hobby[]" value='1'>删库
<input type="checkbox" name="hobby[]" value='2'>跑路
<input type="checkbox" name="hobby[]" value='3'>打篮球
<input type="checkbox" name="hobby[]" value='4'>打台球
<input type="checkbox" name="hobby[]" value='5'>打麻将
<hr>
<button id='selectAll'>全选</button>
<button id='cancel'>全不选</button>
<button id='fanxuan'>反选</button>
</body>
<script type="text/javascript">
$("input[name='username']").prop('disabled',true); //不可用
//$("input[name='username']").prop('disabled',false); //可用
console.log( $("input[name='username']").prop('disabled') ); // true
$("#selectAll").click(function(){
//获取到所有的复选框,都进行批量设置为选中
$("input[name='hobby[]']").prop('checked',true);
});
$("#cancel").click(function(){
//获取到所有的复选框,都进行批量设置为都不选中
$("input[name='hobby[]']").prop('checked',false);
});
$("#fanxuan").click(function(){
//获取到所有的复选框,循环获取到每个dom对象进行选中取反操作
var checkboxs = $("input[name='hobby[]']");
for(var i=0,length = checkboxs.length; i<length; i++){
//DOM方式：通过下标获取到dom对象
//checkboxs[i].checked = !checkboxs[i].checked;
//jquery方式：
$(checkboxs[i]).prop('checked',!$(checkboxs[i]).prop('checked'));
}
});
</script>
</html>
方法二：扩展机制实现
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
爱好：
<input type="checkbox" name="hobby[]" value='0'>敲代码
<input type="checkbox" name="hobby[]" value='1'>删库
<input type="checkbox" name="hobby[]" value='2'>跑路
<input type="checkbox" name="hobby[]" value='3'>打篮球
<input type="checkbox" name="hobby[]" value='4'>打台球
<input type="checkbox" name="hobby[]" value='5'>打麻将
<hr>
<button id='selectAll'>全选</button>
<button id='cancel'>全不选</button>
<button id='fanxuan'>反选</button>
</body>
<script type="text/javascript" src='./jquery.js'></script>
<script type="text/javascript" src="checkAll.js"></script>
<script type="text/javascript">
//全选
$("#selectAll").click(function(){
$("input[name='hobby[]']").checkedAll();
});
//全不选
$("#cancel").click(function(){
$("input[name='hobby[]']").cancelAll();
});
//反选
$("#fanxuan").click(function(){
$("input[name='hobby[]']").fanxuan();
});
</script>
</html>
建议：
a、外部的引入css文件放在head中，先渲染页面，
b、把外部引入的js文件定义在body的下面，防止页面阻塞。
网友评论