正文
js进阶 9-16 如何实现多选框全选和取消
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
js进阶 9-16 如何实现多选框全选和取消一、总结一句话总结：选择取到每一个checkbox的值，然后赋值为true或者false就好。
1、如何实现多选框全选和取消？
一句话总结：选择取到每一个checkbox的值，然后赋值为true或者false就好。
1、如何实现多选框全选和取消？
选择取到每一个checkbox的值，然后赋值为true或者false就好。
17 var arr=document.getElementsByName('check')
18 // alert(arr.length)
19 if (c) {
20 for (var i = 0;i<arr.length;i++){
21 arr[i].checked=true;
2、实现多选框全选和取消用到的是checkbox的哪个重要属性？
checked
二、js进阶 9-16 如何实现多选框全选和取消1、案例描述
实现多选框全选和取消
2、相关知识：单选和复选框
通常使用input元素来创建单选和复选框，的属性和方法相同，两者属性和方法相同，具有input元素共有的其他属性和方法。
属性
- 属性：id/form/name/type/disabled.......
- Checked 设置或返回 checkbox 是否应被选中
- defaultChecked 返回 checked 属性的默认值。
方法
- click() 模拟在 checkbox 中的一次鼠标点击。
- blur()、focus()
3、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
</head>
<body>
<form action="#" method="post" name="form01">
<p>选择课程：</p>
<p>全选：<input type="checkbox" name="all" value="全选" onclick="checkAll(this.checked)"></p>
<p><input type="checkbox" name="check" value="A" >HTML5
<input type="checkbox" name="check" value="B">PHP
<input type="checkbox" name="check" value="C">JAVA</p>
</form>
<script type="text/javascript">
function checkAll(c){
var arr=document.getElementsByName('check')
// alert(arr.length)
if (c) {
for (var i = 0;i<arr.length;i++){
arr[i].checked=true;
}
}else{
for(var i=0;i<arr.length;i++){
arr[i].checked=false;
}
}
} </script>
</body>
</html>
