中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

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

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

純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

高陵县| 六枝特区| 黔南| 昌邑市| 隆林| 蒲江县| 广州市| 明水县| 武清区| 全州县| 北安市| 大足县| 静宁县| 青冈县| 江山市| 汉寿县| 金川县| 称多县| 高雄县| 衡水市| 朝阳市| 通城县| 日照市| 桓台县| 郧西县| 樟树市| 鄂伦春自治旗| 赣州市| 万年县| 永和县| 镇宁| 上虞市| 岫岩| 邵阳县| 新源县| 临沂市| 专栏| 信丰县| 天等县| 通渭县| 大城县|