复习一下原生的checkbox #35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="checkbox" name="c0" id="all" value="全选" onclick="change()">全选
<hr>
<table>
<tr>
<td><input type="checkbox" name="c1"">篮球</td>
</tr>
<tr>
<td><input type="checkbox" name="c1">足球</td>
</tr>
<tr>
<td><input type="checkbox" name="c1">羽毛球</td>
</tr>
<tr>
<td><input type="checkbox" name="c1">兵乓球</td>
</tr>
</table>
<button onclick="submit()">提交</button>
</body>
</html>
<script type="text/javascript">
//获取checkbox按钮组
var allpro = document.getElementsByName("c1");
//获取全选按钮
var all = document.getElementById("all");
let arr = [];
//全选方法
function change() {
//全选按钮被选中时，遍历所有按钮
if (all.checked) {
for (var i = 0; i < allpro.length; i++) {
if (allpro[i].type=="checkbox") {
allpro[i].checked=true;
}
}
// 全选按钮未被选中时
}else{
for (var i = 0; i < allpro.length; i++) {
if (allpro[i].type=="checkbox") {
allpro[i].checked=false;
}
}
}
getCheckhtml();
}
// 给每一个子集check添加点击事件
function childCheck () {
for (let i = 0; i < allpro.length ; i ++) {
addEventHandler(allpro[i], 'click', checkall);
}
}
function checkall () {
let count = 0;
for (let i = 0; i < allpro.length; i ++ ) {
if (allpro[i].checked == true) {
count ++;
}
}
if (count == allpro.length) {
all.checked = true;
} else {
all.checked = false;
}
getCheckhtml();
}
// 获取选中check的内容
function getCheckhtml () {
arr = [];
for (let i = 0; i < allpro.length; i ++ ) {
if (allpro[i].type=="checkbox" && allpro[i].checked == true) {
arr.push(allpro[i].parentNode.innerText);
}
}
}
// 提交
function submit () {
alert(arr);
}
/*
* addEventListener:监听Dom元素的事件
*
* target：监听对象
* type：监听函数类型，如click,mouseover
* func：监听函数
*/
function addEventHandler(target,type,func){
if(target.addEventListener){
//监听IE9，谷歌和火狐
target.addEventListener(type, func, false);
}else if(target.attachEvent){
target.attachEvent("on" + type, func);
}else{
target["on" + type] = func;
}
}
/*
* removeEventHandler:移除Dom元素的事件
*
* target：监听对象
* type：监听函数类型，如click,mouseover
* func：监听函数
*/
function removeEventHandler(target, type, func) {
if (target.removeEventListener){
//监听IE9，谷歌和火狐
target.removeEventListener(type, func, false);
} else if (target.detachEvent){
target.detachEvent("on" + type, func);
}else {
delete target["on" + type];
}
}
childCheck();
</script>
