JS 全选反选及判断是否是全选或全不选

最新推荐文章于 2022-12-09 09:28:33 发布

sungang1120

最新推荐文章于 2022-12-09 09:28:33 发布

阅读量254

点赞数

分类专栏：细细品味-Javascrip

本文链接：https://blog.csdn.net/sungang1120/article/details/84457717

版权

细细品味-Javascrip 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<div class="right_nk_box">
              <div class="right_bg_box">
              <div><h2>JS 全选   反选及 判断是否是全选或全不选</h2></div>
              <table width="100%" cellspacing="1" border="0" bgcolor="#d8dcdf" id="main_tab">
                <tbody>
                <tr class="biaoge_td1">
                    <td width="5%" class="biaoge_td3"><input type="checkbox" id="checkbox_main" name="checkbox_main" οnclick="checkAll();">
                    <span>(全选/反选)</span></td>
                    </tr>
                    <tr class="biaoge_td2">
                        <td bgcolor="#FFFFFF"><input type="checkbox" id="ck_1" name="checkbox" οnclick="unCheckAll();"></td>
                    </tr>
                    <tr class="biaoge_td2">
                        <td bgcolor="#FFFFFF"><input type="checkbox" id="ck_1" name="checkbox" οnclick="unCheckAll();"></td>
                    </tr>
                    <tr class="biaoge_td2">
                        <td bgcolor="#FFFFFF"><input type="checkbox" id="ck_1" name="checkbox" οnclick="unCheckAll();"></td>
                    </tr>
                    <tr class="biaoge_td2">
                        <td bgcolor="#FFFFFF"><input type="checkbox" id="ck_1" name="checkbox" οnclick="unCheckAll();"></td>
                    </tr>
                    <tr class="biaoge_td2">
                        <td bgcolor="#FFFFFF"><input type="checkbox" id="ck_1" name="checkbox" οnclick="unCheckAll();"></td>
                    </tr>
                    <tr class="biaoge_td2">
                        <td bgcolor="#FFFFFF"><input type="checkbox" id="ck_1" name="checkbox" οnclick="unCheckAll();"></td>
                    </tr>
                </tbody>
               </table>
            </div>
            </div>

JS代码

     /**
 * 全选/反选
 */
function checkAll(){
    var checkMain =  document.getElementById("checkbox_main");
    var code_Values = document.getElementsByName("checkbox");
    if(checkMain.checked){
        for(i = 0;i < code_Values.length;i++){
            if(code_Values[i].type == "checkbox"){
                code_Values[i].checked = true;
            }   
        }
    }else{
        for(j = 0;j < code_Values.length;j++){
            if(code_Values[j].type == "checkbox"){
                code_Values[j].checked = false;
            }   
        }
    }
}


function unCheckAll(){
    var checkMain =  document.getElementById("checkbox_main");
    if(isAllCheckTrue()){
        checkMain.checked = true;
    }
    else{
        checkMain.checked = false;
    }
}

/*
 * 判断是否全选的方法
 */
function isAllCheckTrue(){
    var code_Values = document.getElementsByName("checkbox");
    for(i = 0;i < code_Values.length;i++){
        if(!code_Values[i].checked){
            return false;
        }
    }
    return true;
   
}

/*
 * 判断是否全不选的方法
 */
function isAllCheckFalse(){
    var code_Values = document.getElementsByName("checkbox");
    for(i = 0;i < code_Values.length;i++){
        if(code_Values[i].checked){
            return false;
        }
    }
    return true;
}