Javascript：按类别名称选中所有复选框

Question

I'm having an issue with the following code which selects all checkboxes in the row based on the 'Select All' button clicked. The problem is I have to click each button twice if some checkboxes are already checked in order to change their state. I'd like to do this with just one click on each button no matter if checkboxes are selected or not. Is there a simple way to do this? Thank you!

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

You can use this demo to check uncheck of checkbox on single click, click on below link and check demo and integrate in your system.

HTML CODE:

<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 Code

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/

Thanks

Answer 2

You need to store separate state for each checkbox type

 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> 

---

But if you have jQuery then

 $('.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

You can do it like this :

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;
            }
        }
    }
});

Here is the working Fiddle

Do let me know if it is according to your requirement.

Happy Coding.

Answer 4

Try adjusting checked variable to utilize Array.prototype.filter to select elements not disabled , Array.prototype.every to toggle element checked attribute

 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

Problem is you are using same flag for multiple class names:

Plain Js solution:

 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 Script

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