javascript - 如何从jquery标记选中的所有复选框

Question

我想使用 JavaScript 通过单击来选中和取消选中复选框列表:

<table width="100%" border="0" cellspacing="1" cellpadding="1" align="center">
<tr>
    <td width="10%"><input type="checkbox" name="All" value="All" checked="checked" id="SelectAll1" class="MemberSelectcheckBox1" /></td>
    <td width="90%"><strong>Field Name</strong>:</td>
</tr>
<tr>
    <td><input type="checkbox" name="FirstName" value="1" id="FirstName" class="MemberSelectcheckBox1" checked="checked"></td>
    <td>First Name</td>
</tr>
<tr>
    <td><input type="checkbox" name="Surname" value="1" id="Surname" class="MemberSelectcheckBox1" checked="checked"></td>
    <td>Surname</td>
</tr>
<tr>
    <td><input type="checkbox" name="Email" value="1" id="Email" class="MemberSelectcheckBox1" checked="checked"></td>
    <td>Email</td>
</tr>
<tr>
    <td><input type="checkbox" name="Phone" value="1" id="Phone" class="MemberSelectcheckBox1" checked="checked"></td>
    <td>Phone</td>
</tr>
<tr>
</tr>
</table>

和下面提到的 JavaScript 仅适用于未选中的情况:

<script type="text/javascript">

$("#SelectAll1").click(function(){
    if($(this).is(':checked')){
        //$(".MemberSelectcheckBox1").attr('checked','checked');
    }else{
        $(".MemberSelectcheckBox1").removeAttr('checked');
    }
});

</script>

Answer 1

这是解决方案；使用.prop()代替attr()和removeAttr()，并且最好使用on() > 而不是 click():

$(document).on('click', '.#SelectAll1', function () {
    if($(this).is(':checked')) {
        $(".MemberSelectcheckBox1").prop("checked",true);
    } else {
        $(".MemberSelectcheckBox1").prop("checked",false); 
    }
});