javascript - 单击主复选框时无法更改所有复选框的 css

Question

大家好，

我正在尝试使用 jQuery 更改表单中所有复选框的背景和颜色。我无法让它工作。

这就是我的代码现在的样子:
HTML部分:

<form action="" method="">
    <div id="child1">
        <input type="checkbox" class="select-all-checkboxes" name="select-all-checkboxes" />
    </div>
    <div id="child2">
        <input type="checkbox" name="checkboxs[]" />
        <input type="checkbox" name="checkboxs[]" />
        <input type="checkbox" name="checkboxs[]" />
        <input type="checkbox" name="checkboxs[]" />
    </div>
</form>

jQuery 部分

$('form input.select-all-checkboxes:checkbox').live('click', function()
{
    if($(this).attr('checked') == true)
    {
        $(this).parent('form').children('input:checkbox').css({
            background: 'rgba(0, 255, 0, 0.5)',
            border: '1px solid green'
        });   
    }
    else
    {
        $(this).parent('form').children('input:checkbox').css({
            background: 'none',
            border: '1px solid transparent'
        });   
    }
});

它应该做的是，当您单击带有“select-all-checkboxes”类的复选框时，表单中的所有复选框都应该被选中并获得不同的边框和背景。

我只是无法让它发挥作用。希望大家能够帮助我。

提前致谢，
标记

Answer 1

您的选择器错误。您需要使用 parents 和 find。即便如此，样式规则似乎对 chrome 中的复选框没有影响

$(this).parents('form').find('input:checkbox')