純js實現(xiàn)checkbox的全選、反選、全不選

分開：
a. 代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="checkbox" id="check_all">全選
<input type="checkbox" id="un_check_all">全不選
<input type="checkbox" id="un_check">反選
<br>
<input type="checkbox"> 
<br>
<input type="checkbox">
<br>
<input type="checkbox">
<br>
<input type="checkbox">
<br>
<input type="checkbox">
<br>
<input type="checkbox">
<script>
var check_all = document.getElementById('check_all');
var un_check_all = document.getElementById('un_check_all');
var un_check = document.getElementById('un_check');
var checkbox = document.getElementsByTagName('input');
var arr = new Array('check_all','un_check_all','un_check')
function testCheck(){
var bool = false;
for (var i=0;i<checkbox.length;i++){
    if(!(checkbox[i].hasAttribute('id') && (arr.indexOf(checkbox[i].getAttribute('id'))!=-1))){
        if(checkbox[i].checked){
            bool = true;
            break;
        }
    }
}
return bool;
}
function checkAll(){
for (var i=0;i<checkbox.length;i++){
    if(checkbox[i].hasAttribute('id') && (arr.indexOf(checkbox[i].getAttribute('id'))!=-1)){
        if(checkbox[i].getAttribute('id')=='check_all'){
            console.log(1)
            checkbox[i].checked = true
        }else{
            checkbox[i].checked = false
        }
    }else{
        checkbox[i].checked = true
    }
}
}
function unCheckAll(){
for (var i=0;i<checkbox.length;i++){
    if(checkbox[i].hasAttribute('id') && (arr.indexOf(checkbox[i].getAttribute('id'))!=-1)){
        if(checkbox[i].getAttribute('id')=='un_check_all'){
            console.log(2)
            checkbox[i].checked = true
        }else{
            checkbox[i].checked = false
        }
    }else{
        checkbox[i].checked = false
    }
}
}
function unCheck(){
for (var i=0;i<checkbox.length;i++){
    if(checkbox[i].hasAttribute('id') && (arr.indexOf(checkbox[i].getAttribute('id'))!=-1)){
        if(checkbox[i].getAttribute('id')=='un_check'){
            console.log(3)
            checkbox[i].checked = true
        }else{
            checkbox[i].checked = false
        }
    }else{
        if(checkbox[i].checked == true){
            checkbox[i].checked = false
        }else{
            checkbox[i].checked = true
        }
    }
}
}
check_all.onclick = function(){
                    checkAll()
                }
un_check_all.onclick = function(){
                    unCheckAll()
                }
un_check.onclick = function(){
                    unCheck()
                }
</script>
</body>
</html>

b. 效果：
純js實現(xiàn)checkbox的全選、反選、全不選

成都創(chuàng)新互聯(lián)公司專注于企業(yè)全網營銷推廣、網站重做改版、施秉網站定制設計、自適應品牌網站建設、HTML5、商城網站建設、集團公司官網建設、外貿網站建設、高端網站制作、響應式網頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為施秉等各大城市提供網站開發(fā)制作服務。

合并：
a. 代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="checkbox" id="toggle_check">全選/全不選
<br>
<input type="checkbox"> 
<br>
<input type="checkbox">
<br>
<input type="checkbox">
<br>
<input type="checkbox">
<br>
<input type="checkbox">
<br>
<input type="checkbox">
<script>
var toggle_check = document.getElementById('toggle_check');
var checkbox = document.getElementsByTagName('input');
function testCheck(){
var bool = false;
for (var i=0;i<checkbox.length;i++){
    if(!(checkbox[i].hasAttribute('id') && checkbox[i].getAttribute('id') == 'toggle_check')){
        if(checkbox[i].checked){
            bool = true;
            break;
        }
    }
}
return bool;
}
function checkAll(){
for (var i=0;i<checkbox.length;i++){
    checkbox[i].checked = true
}
}
function unCheckAll(){
for (var i=0;i<checkbox.length;i++){
    checkbox[i].checked = false
}
}
toggle_check.onclick = function(){
                    var bool = testCheck()
                    if(bool){
                        unCheckAll()
                    }else{
                        checkAll()
                    }
                }
</script>
</body>
</html>

b. 效果：
純js實現(xiàn)checkbox的全選、反選、全不選

當前文章：純js實現(xiàn)checkbox的全選、反選、全不選
瀏覽地址：http://muchs.cn/article24/ghigje.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供域名注冊、網站策劃、云服務器、虛擬主機、品牌網站制作、微信小程序

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

純js實現(xiàn)checkbox的全選、反選、全不選

純js實現(xiàn)checkbox的全選、反選、全不選