проблема селектора jquery

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')

..., который возвращает набор для работы каскада.Object всегда правдиво в JavaScript.

Попробуйте ...

this.checked

..., которое возвращает, установлен флажок или нет.Если вы хотите сделать это способом jQuery, используйте $(this).is(':checked').Хотя я бы не стал, это более многословно и менее производительно.

Answer 2

Оператор в операторе if устанавливает флажки для флажков. В частности, это утверждение: $(this).attr('checked','checked').

Вместо этого вы можете сделать if($(this).prop('checked'))

Подробнее о jQuery Prop методе .

В качестве альтернативы вы можете сделать, this.checked, который будет обращаться к DOM напрямую или через jQuery, $(this).is(':checked').

Answer 3

Вы передаете значение checked в attr() в качестве второго аргумента. Это заставляет это быть установленным. Затем возвращается объект jQuery с этим input, который всегда является истинным значением.

Ваше условие 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 4

Существует фактически селектор специально для отмеченных флажков.

$('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'});
});

Если вы используете это, вам не придется выполнять какую-либо логику самостоятельно.

Answer 5

$('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 6

На первый взгляд я вижу, что вы используете .is('checked'), когда, как я полагаю, вы хотите .is(':checked') Разница в предыдущем двоеточии.

ОБНОВЛЕНИЕ: Я вижу, вы обновили код.Строка

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

фактически устанавливает все элементы input: checkbox на флажок.Должно быть:

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

Answer 7

if($(this).attr('checked','checked')) будет вашей проблемой.Вы присваиваете checked каждому флажку вместо того, чтобы проверять, установлен ли он.