Question

我正在使用此代码：

$('fieldset input[type=checkbox]').each(function () {if($(this).attr('checked','checked')){
    var switches = $(this).parent().find('.switch');
    $(switches).attr('state','on')
    $(switches).css({'left':"52px"});
    $(switches).parent().css({'background-position': "147px -37px"});
}})

但不知怎的，它将我的所有复选框设置为checked="checked"我只是愚蠢还是代码中的其他内容干扰了？

感谢您的帮助：）

编辑：这是HTML

<fieldset>
        <input checked="checked" />
        <label></label>
        <div class="toggle_box">
            <div class="switch" state="on"></div>
        </div>
    </fieldset>
    <fieldset>
        <input/>
        <label></label>
        <div class="toggle_box">
            <div class="switch"></div>
        </div>
    </fieldset>

Answer 1

这段代码正在做...

$(this).attr('checked','checked')

...返回集合以使级联工作。 JavaScript中的Object始终是 truthy 。

...试

this.checked

...返回是否选中复选框。如果您想以jQuery方式执行此操作，请使用$(this).is(':checked')。但我不会，它更冗长，性能也更差。

Answer 2

您将checked值传递给attr()作为第二个参数。这导致它被设定。然后返回的是具有input的jQuery对象，它始终是一个真正的值。

你的if条件应如下所示（改为使用:checked伪类）：

if ($(this).is(':checked')) {

在旁注中，您的内部代码可以重构为：

$(this).parent().find('.switch')
    .attr('state', 'on')
    .css({ 'left': "52px" })
    .parent()
        .css({ 'background-position': "147px -37px" });

如果使用缓存变量（即switches），您可以，但不将其包装在jQuery函数中。它本身就是一个jQuery对象，所以不需要包装。

Answer 3

if语句中的语句将复选框设置为选中状态。特别是，这句话：$(this).attr('checked','checked')。

相反，您可以执行if($(this).prop('checked'))

详细了解jQuery Prop method。

或者，您可以执行this.checked直接访问DOM或使用jQuery $(this).is(':checked')。

Answer 4

if($(this).attr('checked','checked'))会是你的问题。您要为每个复选框分配checked，而不是检查是否已选中。

Answer 5

乍一看，当我相信你想要.is('checked')时，我看到你正在使用.is(':checked')前面的结肠是不同的。

更新：我看到你更新了代码。这条线

if ($(this).attr('checked', 'checked'))

实际上是要设置所有'input：checkbox'元素。它应该是：

if ($(this).is(':checked'))

Answer 6

$('fieldset input[type=checkbox]').each(function ()  {if($(this).attr('checked') == 'checked')){
var switches = $(this).parent().find('.switch');
$(switches).attr('state','on')
$(switches).css({'left':"52px"});
$(switches).parent().css({'background-position': "147px -37px"});
}})

Answer 7

实际上有一个专门用于复选框的选择器。

$('fieldset input[type=checkbox]:checked').each(function(){
    var switches = $(this).parent().find('.switch');
    $(switches).attr('state','on')
    $(switches).css({'left':'52px'});
    $(switches).parent().css({'background-position':'147px -37px'});
});

如果您使用它，您不必自己做任何逻辑。

jquery选择器问题

7 个答案: