Question

我有一个包含多个复选框的表单，我试图通过单击某些链接来检查/取消选中。它在我第一次使用时工作，但每次都在那之后失败。代码是：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Checkbox Test</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script language="javascript">
    $('document').ready(function() {
        $('#chkAll').click(function() {
            $('input[type="checkbox"]').attr('checked', 'checked');
        });
        $('#unChkAll').click(function() {
            $('input[type="checkbox"]').removeAttr('checked');
        });
    });
</script>
<style type="text/css"> 
span {
    text-decoration: underline;
    cursor: pointer;
}
</style>
</head>

<body>
<h2>Checkbox Test</h2>
<form name="form1" method="post" action="">
    <p>
        <label>
            <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0">
            Checkbox</label>
        <br>
        <label>
            <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_1">
            Checkbox</label>
        <br>
    </p>
</form>
<p><span id="chkAll">Check All</span> / <span id="unChkAll">Uncheck all</span></p>
</body>
</html>

我不确定这里发生了什么。当我使用firebug检查输入元素时，它显示正在设置和取消设置的“已检查”属性。然而，当实际查看复选框时，没有任何变化。

需要帮助。

Answer 1

您的代码在首次使用后无法正常工作，因为您已经使用.removeAttr()，因此它会从所有复选框中永久删除您的checked属性

因此，在您的情况下，您想要设置而不是删除它，这就是为什么您应该使用 .prop() 而不是.removeAttr()：

$('document').ready(function () {
    $('#chkAll').click(function () {
        $('input[type="checkbox"]').prop('checked', true);
    });
    $('#unChkAll').click(function () {
        $('input[type="checkbox"]').prop('checked', false);
    });
});

<强> Fiddle Demo

Answer 2

使用.prop

$('document').ready(function() {
        $('#chkAll').click(function() {
            $('input[type="checkbox"]').prop('checked', true);
        });
        $('#unChkAll').click(function() {
            $('input[type="checkbox"]').prop('checked',false);
        });
    });

详细了解here

Answer 3

使用.prop()而不是.removeAttr()从元素中删除属性：

$('document').ready(function() {
        $('#chkAll').click(function() {
            $('input[type="checkbox"]').prop('checked', true);
        });
        $('#unChkAll').click(function() {
            $('input[type="checkbox"]').prop('checked', false);
        });
    });

<强> DEMO

设置和取消设置属性只能工作一次

3 个答案: