亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

純js實現checkbox的全選、反選、全不選

發布時間:2020-06-11 21:29:35 來源:網絡 閱讀:1183 作者:Lee_吉 欄目:web開發
  1. 分開:
    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實現checkbox的全選、反選、全不選
    純js實現checkbox的全選、反選、全不選
    純js實現checkbox的全選、反選、全不選
    純js實現checkbox的全選、反選、全不選
    純js實現checkbox的全選、反選、全不選

  2. 合并:
    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實現checkbox的全選、反選、全不選
    純js實現checkbox的全選、反選、全不選
    純js實現checkbox的全選、反選、全不選

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

屏东县| 历史| 泾阳县| 突泉县| 深泽县| 盖州市| 巴东县| 赫章县| 阳东县| 安陆市| 西平县| 双桥区| 茂名市| 慈溪市| 玉田县| 固始县| 张家口市| 大名县| 丹江口市| 闵行区| 昆明市| 宿松县| 贵阳市| 景宁| 天长市| 冕宁县| 永吉县| 桃江县| 白朗县| 和龙市| 神农架林区| 芮城县| 抚远县| 余姚市| 闸北区| 南城县| 紫金县| 新蔡县| 黄骅市| 女性| 长兴县|