Как переключить атрибут в jQuery

Ответ 1

Я бы сделал это, передав функцию prop (начиная с jQuery 1.6, attr). Возвращаемое значение этого параметра устанавливается как новое значение свойства.

$(this)
    .closest('li')
        .find('input:checkbox').prop('checked', function(idx, oldProp) {
            return !oldProp;
        });

Ключевым фактом здесь является то, что вы можете передать true или false в prop, чтобы установить свойство checked. oldProp - это существующее значение свойства (которое будет либо true, либо false), поэтому !oldProp - это инверсия: проверенные элементы не отмечены и наоборот.

Обратите внимание, что я также изменил ваш код, чтобы найти ближайший элемент предка li с closest, который должен быть более надежным и эффективны.

Ответ 2

Вы можете добавить довольно базовое расширение jQuery, которое работает так же, как "toggle()" и "toggle (showOrHide)", но для атрибутов - "toggleAttr (атрибут)" и "toggleAttr (attribute, addOrRemove)"

$.fn.toggleAttr = function(a, b) {
    var c = (b === undefined);
    return this.each(function() {
        if((c && !$(this).is("["+a+"]")) || (!c && b)) $(this).attr(a,a);
        else $(this).removeAttr(a);
    });
};

Примечание. Это совместимо с xhtml и предназначено для таких атрибутов, как "отключено", "включено", "проверено", "выбрано" и т.д.

Пример использования (для вашего сценария):

$('#imageCheckBoxes img').click(function() {
    $(this).parent('span').find('input:checkbox').toggleAttr('checked');
}

EDIT - хотя, как указано artlung, ярлык, вероятно, лучше всего подходит для вашего сценария

Ответ 3

Другой возможный подход:

$('#imageCheckBoxes').delegate('img', 'click', function(){
    var $associatedCheckbox = $(this).siblings('input:checkbox');
    if ($associatedCheckbox.is(':checked')){
        $(this).removeClass('checked');
        $associatedCheckbox.removeAttr('checked');
    } else {
        $(this).addClass('checked');
        $associatedCheckbox.attr('checked', 'checked');
    }
});

Я использую delegate(), хотя вы можете так же легко использовать стандартный вызов click() или bind() для добавления функции прослушивания.

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

#imageCheckboxes img {
  border: 2px solid #fff;
}
/* feedback for your users! */
#imageCheckboxes img.checked {
  border: 2px solid #6f6;
}

Теперь мне кажется, что вы также можете избежать JavaScript для этого, и просто поместите теги <label> вокруг своих изображений, а затем привяжите их с помощью своих флажков, чтобы получить тот же эффект. Просто замените <span> на свой html <label>.

Ответ 4

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

$('#imageCheckBoxes img').click(function() {
    var el = $(this).parent('span').find('input:checkbox');
    if(el.is(':checked'))
        el.attr('checked', '');
    else
        el.attr('checked', 'checked');
});

Ответ 5

Мое решение было немного более умным:

var $formContainer = $(".form-container"),
    $myCheckbox = $formContainer.find(".my-checkbox"),
    $requiredFields = $formContainer.find("input[required], textarea[required], select[required]").removeAttr("required"); // remove the required attribute on all required form inputs
$myCheckbox.change(function () {
    $formContainer.toggle("fast", function() {
        if ($(this).is(":visible")) {
            $requiredFields.attr("required", true);
        }
        else {
            $requiredFields.removeAttr("required");
        }
    });
});