Javascript：按類別名稱選中所有復選框

Question

我遇到了以下代碼的問題，該代碼根據單擊的“全選”按鈕選擇行中的所有復選框。 問題是，如果已經選中某些復選框以更改其狀態，則我必須單擊每個按鈕兩次。 無論是否選中復選框，我都希望在每個按鈕上單擊一下即可完成此操作。 有沒有簡單的方法可以做到這一點？ 謝謝！

jsFiddle

<form name="editview">    
    <input type="checkbox" id="edit_1" name="check1" class="edit">
    <input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked">
    <input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled">
    <input type="checkbox" id="edit_4" name="check4" class="edit">
    <input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'edit')" title="Select all: items.">
    <input type="checkbox" id="view_5" name="check5" class="view">
    <input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked">
    <input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled">
    <input type="checkbox" id="view_8" name="check8" class="view">
    <input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'view')" title="Select all: items.">
</form>

checked = true;

function CheckUncheckAllAndExcludeDisabledByClass(theElement,theCheckBoxClass) {
    var checks = document.querySelectorAll('.' + theCheckBoxClass);
    for (var i = 0; i < checks.length; i++) {
        var check = checks[i];
        if (!check.disabled) {
            check.checked = checked;
        }
    }
    checked = !checked;
}

Answer 1

您可以使用該演示單擊一下以取消選中復選框，單擊下面的鏈接並檢查演示並集成到您的系統中。

HTML代碼：

<div id="divCheckAll">
<input type="checkbox" name="checkall" id="checkall" onClick="check_uncheck_checkbox(this.checked);" />Check All</div>
<div id="divCheckboxList">
    <div class="divCheckboxItem"><input type="checkbox" name="language" id="language1" value="English" />English</div>
    <div class="divCheckboxItem"><input type="checkbox" name="language" id="language2" value="French" />French</div>
    <div class="divCheckboxItem"><input type="checkbox" name="language" id="language3" value="German" />German</div>
    <div class="divCheckboxItem"><input type="checkbox" name="language" id="language4" value="Latin" />Latin</div>
</div>

jQuery代碼

function check_uncheck_checkbox(isChecked) {
    if(isChecked) {
        $('input[name="language"]').each(function() { 
            this.checked = true; 
        });
    } else {
        $('input[name="language"]').each(function() {
            this.checked = false;
        });
    }
}

http://phppot.com/jquery/check-uncheck-all-checkbox-using-jquery/

謝謝

Answer 2

您需要為每種復選框類型存儲單獨的狀態

 checked = {}; function CheckUncheckAllAndExcludeDisabledByClass(theElement, theCheckBoxClass) { var checks = document.querySelectorAll('.' + theCheckBoxClass); var ckd = checked[theCheckBoxClass] === false ? false : true; for (var i = 0; i < checks.length; i++) { var check = checks[i]; if (!check.disabled) { check.checked = ckd; } } checked[theCheckBoxClass] = !ckd; } 

 <form name="editview"> <input type="checkbox" id="edit_1" name="check1" class="edit"> <input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked"> <input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled"> <input type="checkbox" id="edit_4" name="check4" class="edit"> <input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'edit')" title="Select all: items."> <input type="checkbox" id="view_5" name="check5" class="view"> <input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked"> <input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled"> <input type="checkbox" id="view_8" name="check8" class="view"> <input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'view')" title="Select all: items."> </form> 

---

但是如果你有jQuery，那么

 $('.select-all').click(function() { var $this = $(this), checked = !$this.data('checked'); $('.' + $this.data('class')).not(':disabled').prop('checked', checked); $this.data('checked', checked) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form name="editview"> <input type="checkbox" id="edit_1" name="check1" class="edit"> <input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked"> <input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled"> <input type="checkbox" id="edit_4" name="check4" class="edit"> <input type="button" class="button select-all" value="Select All" title="Select all: items." data-class="edit"> <input type="checkbox" id="view_5" name="check5" class="view"> <input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked"> <input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled"> <input type="checkbox" id="view_8" name="check8" class="view"> <input type="button" class="button select-all" value="Select All" title="Select all: items." data-class="view"> </form> 

Answer 3

您可以這樣做：

HTML：

<div id="test">
    <input type="checkbox" id="check1" name="check1" class="check">
    <input type="checkbox" id="check01" name="check01" class="check" disabled="disabled" checked>
    <input type="checkbox" id="check2" name="check2" class="check" disabled="disabled">
    <input type="checkbox" id="check3" name="check3" class="check">
    <input type="checkbox" id="check4" name="check4" class="check">
    <input type="checkbox" id="check50" name="check50" class="check">
    <input type="checkbox" id="check6" name="check6" class="check">
</div>
<input type="button" id="uncheckAll" value="select all">

JS：

$('#uncheckAll').click(function(){
    var checks = $('input[class="check"]');
    for(var i =0; i< checks.length;i++){
        var check = checks[i];
        if(!check.disabled){
            if (check.checked) {
            check.checked = false;
            }
        }
    }

    for(var i =0; i< checks.length;i++){
        var check = checks[i];
        if(!check.disabled){
            if (!check.checked) {
            check.checked = true;
            }
        }
    }
});

這是工作中的小提琴

讓我知道是否符合您的要求。

編碼愉快。

Answer 4

嘗試調整checked變量以利用Array.prototype.filter選擇未禁用的元素， Array.prototype.every切換元素checked屬性

 function CheckUncheckAllAndExcludeDisabledByClass(theElement, theCheckBoxClass) { var checks = document.querySelectorAll('.' + theCheckBoxClass); var checked = Array.prototype.filter.call(checks, function(el) { return !el.disabled }).every(function(el) { return el.checked }); for (var i = 0; i < checks.length; i++) { var check = checks[i]; if (!check.disabled) { check.checked = !checked ? true : false; } } } 

 <form name="editview"> <input type="checkbox" id="edit_1" name="check1" class="edit"> <input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked"> <input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled"> <input type="checkbox" id="edit_4" name="check4" class="edit"> <input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'edit')" title="Select all: items."> <input type="checkbox" id="view_5" name="check5" class="view"> <input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked"> <input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled"> <input type="checkbox" id="view_8" name="check8" class="view"> <input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'view')" title="Select all: items."> </form> 

Answer 5

問題是您對多個類名使用相同的標志：

純Js解決方案：

 var state = {}; var toggle = function(clas) { var chk = state[clas] = !state[clas];//flips the state (true/false) var chks = document.getElementsByClassName(clas); var l = chks.length; while (l--) if (!chks[l].disabled) chks[l].checked = chk; }; 

 <form name="editview"> <input type="checkbox" id="edit_1" name="check1" class="edit"> <input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked"> <input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled"> <input type="checkbox" id="edit_4" name="check4" class="edit"> <input type="button" class="button" value="Select All" onclick="toggle('edit')" title="Select all: items."> <input type="checkbox" id="view_5" name="check5" class="view"> <input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked"> <input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled"> <input type="checkbox" id="view_8" name="check8" class="view"> <input type="button" class="button" value="Select All" onclick="toggle('view')" title="Select all: items."> </form> 

Answer 6

的HTML

<div id="divCheckAll">
   <input type="checkbox" name="check" id="checkall" 
          onClick="check(this.checked);" />Check All
</div>
<div id="divCheckboxList">
   <div class="divCheckboxItem">
      <input type="checkbox" name="language" value="English" />English
   </div>
   <div class="divCheckboxItem">
      <input type="checkbox" name="language"  value="Hindi" />Hindi
   </div>
   <div class="divCheckboxItem">
      <input type="checkbox" name="language"  value="German" />German
   </div>
   <div class="divCheckboxItem">
      <input type="checkbox" name="language"  value="Marathi" />Marathi
   </div>
</div>

Java腳本

function check(isChecked) {
   if(isChecked) {
      $('input[name="language"]').each(function() { 
         this.checked = true; 
       });
   } else {
       $('input[name="language"]').each(function() {
          this.checked = false;
       });
   }
}