復(fù)習(xí)一下原生的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() {
//全選按鈕被選中時(shí)，遍歷所有按鈕
if (all.checked) {
for (var i = 0; i < allpro.length; i++) {
if (allpro[i].type=="checkbox") {
allpro[i].checked=true;
}
}
// 全選按鈕未被選中時(shí)
}else{
for (var i = 0; i < allpro.length; i++) {
if (allpro[i].type=="checkbox") {
allpro[i].checked=false;
}
}
}
getCheckhtml();
}
// 給每一個(gè)子集check添加點(diǎn)擊事件
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的內(nèi)容
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:監(jiān)聽Dom元素的事件
*
* target：監(jiān)聽對象
* type：監(jiān)聽函數(shù)類型，如click,mouseover
* func：監(jiān)聽函數(shù)
*/
function addEventHandler(target,type,func){
if(target.addEventListener){
//監(jiān)聽IE9，谷歌和火狐
target.addEventListener(type, func, false);
}else if(target.attachEvent){
target.attachEvent("on" + type, func);
}else{
target["on" + type] = func;
}
}
/*
* removeEventHandler:移除Dom元素的事件
*
* target：監(jiān)聽對象
* type：監(jiān)聽函數(shù)類型，如click,mouseover
* func：監(jiān)聽函數(shù)
*/
function removeEventHandler(target, type, func) {
if (target.removeEventListener){
//監(jiān)聽IE9，谷歌和火狐
target.removeEventListener(type, func, false);
} else if (target.detachEvent){
target.detachEvent("on" + type, func);
}else {
delete target["on" + type];
}
}
childCheck();
</script>
