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

Вы должны хранить Сентябре arate состояние для каждого типа CheckBox

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

Здесь работает Fiddle

дайте мне знать, если это по вашему требованию.

Счастливое кодирование.

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 Script

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