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

Answer 2

这似乎有效：

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

检查JSFiddle here。

Answer 3

不使用.attr()来更改属性的状态，请改用.prop()。

见jQuery documentation）：

从jQuery 1.6开始，.prop（）方法提供了一种显式检索属性值的方法，而.attr（）则检索属性。

正如评论中所指出的，使用.change()处理程序而不是.click()处理程序，或者不会选择通过键盘切换。

您还可以将代码简化为：

$("#SelectAll1").change(function() {
    $(".MemberSelectcheckBox1").prop('checked', $(this).prop('checked'));
});

Answer 4

试试这个：

<script type="text/javascript">

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

Answer 5

试试这个我觉得它会有所帮助：

(document).ready(function(){
    $('.check:button').toggle(function(){
        $('input:checkbox').attr('checked', 'checked');
        $(this).val('uncheck all');
    },function(){
        $('input:checkbox').removeAttr('checked');
        $(this).val('check all');        
    })
})       

<input type="checkbox" class="checkAll" /> <b>Check All</b>
<input type="checkbox" class="cb-element" /> Box1
<input type="checkbox" class="cb-element" /> Box2
<input type="checkbox" class="cb-element" /> Box3

Answer 6

试试这个：

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

Answer 7

attr('checked', true)无效jquery > 1.9。因此，请使用prop()代替attr()

试试这个：

$("#SelectAll1").change(function() {
    $.each($('[class=MemberSelectcheckBox1]'), function (i, item) {
        if($(this).is(':checked')) {
            $(".MemberSelectcheckBox1").prop('checked', true);

        } else {
            $(".MemberSelectcheckBox1").removeAttr('checked');
        }
    });
});

Demo

Answer 8

$("#SelectAll1").click(function() {
        var isChecked = $(this).is(':checked');
        if(isChecked) {
           $(".MemberSelectcheckBox1").attr({checked:true});
        } else {
            $(".MemberSelectcheckBox1").attr({checked:false});

        }
    });

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

8 个答案: