日期:2014-05-16  浏览次数:20349 次

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

<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" onclick="checkAll();">
??????????????? ??? <span>(全选/反选)</span></td>
??????????????? ??? </tr>
??????????????? ??? <tr class="biaoge_td2">
??????????????? ??? ??? <td bgcolor="#FFFFFF"><input type="checkbox" id="ck_1" name="checkbox" onclick="unCheckAll();"></td>
??????????????? ??? </tr>
??????????????? ??? <tr class="biaoge_td2">
??????????????? ??? ??? <td bgcolor="#FFFFFF"><input type="checkbox" id="ck_1" name="checkbox" onclick="unCheckAll();"></td>
??????????????? ??? </tr>
??????????????? ??? <tr class="biaoge_td2">
??????????????? ??? ??? <td bgcolor="#FFFFFF"><input type="checkbox" id="ck_1" name="checkbox" onclick="unCheckAll();"></td>
??????????????? ??? </tr>
??????????????? ??? <tr class="biaoge_td2">
??????????????? ??? ??? <td bgcolor="#FFFFFF"><input type="checkbox" id="ck_1" name="checkbox" onclick="unCheckAll();"></td>
??????????????? ??? </tr>
??????????????? ??? <tr class="biaoge_td2">
??????????????? ??? ??? <td bgcolor="#FFFFFF"><input type="checkbox" id="ck_1" name="checkbox" onclick="unCheckAll();"></td>
??????????????? ??? </tr>
??????????????? ??? <tr class="biaoge_td2">
??????????????? ??? ??? <td bgcolor="#FFFFFF"><input type="checkbox" id="ck_1" name="checkbox" onclick="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;
}