一次笔试中出现的题目,也非常简单。
使用原生js实现的方法是,当全选的被勾选中的时候,把上面所有的选项的checked改为true,还可以使用jQuery,那就更加简单了。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
<input name="userid" type="checkbox" value="1" />
<input name="userid" type="checkbox" value="2" />
<input name="userid" type="checkbox" value="3" />
<input name="userid" type="checkbox" value="4" />
<input name="userid" type="checkbox" value="5" />
<input name="userid" type="checkbox" value="6" />
<br />
<input type="button" value="全选" id="all"/>
<br />
<input type="button" value="全不选" id="resove"/>
<br />
</form>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript">
//使用js
var all=document.getElementById("all");
console.log(all);
var resove=document.getElementById("resove");
all.οnclick=function(){
var arr=document.querySelectorAll("[type='checkbox']");
arr.forEach(function(val) {
val.checked=true;
});
}
resove.οnclick=function(){
var arr=document.querySelectorAll("[type='checkbox']");
arr.forEach(function(val) {
val.checked=false;
});
}
//使用jQuery
// $("#all").click(function(){
// $("form :checkbox").prop("checked",true);
// });
// $("#resove").click(function(){
// $("form :checkbox").prop("checked",false);
// })
</script>
</body>
</html>
使用jQuery记得先引入jQuery