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/

谢谢