HTML：

    <input id="readall" name="readall" type="checkbox" value="1">
<div id="permGrid">
    <input id="recipe.read" name="recipe.read" type="checkbox" value="1" rel="read">
    <input id="group.read" name="group.read" type="checkbox" value="1" rel="read">
    <input id="ingredients.read" name="ingredients.read" type="checkbox" value="1" rel="read">
</div>

JS：

$('#readall').click(function()
{
    var checkStatus = $(this).is(':checked');
    var checkboxList =  $('#permGrid input[rel="read"]');
    $(checkboxList).attr('rel', 'read').each(function(index)
    {
        if(checkStatus == true)
        {
            $(this).attr('checked', 'checked');
            console.log($(this).attr('checked'));
        }
        else
        {
            $(this).removeAttr('checked').reload();
            console.log($(this).attr('checked'));
        }
    });
});

上面的代码似乎很好，但是检查/取消选中只能在第一次使用。但是，当我第二次点击主复选框时，它不会将其他复选框的状态更改为“已检查”状态。有什么我需要做的吗？

我找到了类似的here。我比较了代码和我的代码，这段代码有些类似，但我的工作并不起作用。

Answer 1

尝试使用道具，并像这样缩短代码

$('#readall').click(function () {
    var checkboxList = $('#permGrid input[rel="read"]')
    checkboxList.prop('checked', this.checked);
});

DEMO

Answer 2

你不能像这样使用方法.reload

$(this).removeAttr('checked').reload(); 
                  // returns Uncaught TypeError: Object #<Object> has no method 'reload'

删除它，它会起作用。

JSFiddle

Answer 3

对所有复选框使用一个类，您需要在单击某个复选框时进行更改。像：

<input id="recipe.read" class="toChange" name="recipe.read" type="checkbox" value="1" rel="read" />

我添加了一个类=＆＃34; toChange＆＃34;除了第一个复选框之外的所有复选框。

<input id="readall" name="readall" type="checkbox" value="1">
<div id="permGrid">
<input id="recipe.read" class="toChange" name="recipe.read" type="checkbox" value="1" rel="read" />
<input id="group.read" class="toChange" name="group.read" type="checkbox" value="1" rel="read" />
<input id="ingredients.read" class="toChange" name="ingredients.read" type="checkbox" value="1" rel="read" />
</div>

然后使用以下脚本：

$('#readall').click(function(){
    var checkStatus = $(this).is(':checked');   

    if(checkStatus){
        $(".toChange").attr('checked', 'checked');
    }
    else{
        $(".toChange").removeAttr('checked')
    }   
});

Demo

使用jquery更改checkbox的checked属性

HTML：

JS：

3 个答案: