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

Я пытаюсь использовать изображения как флажки. Следующие будут работать нормально, если бы это были радиостанции, а не флажки, на которые я нацелился, но с флажками проблема заключается в том, что я не могу выбрать элемент, щелкнув его снова после его выбора.

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

<div id="imageCheckBoxes">
    <ul>
        <li><a href="">Africa</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
        <li><a href="">Asia/Pacific Islands</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
        <li><a href="">Australia</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
        <li><a href="">Central/South America</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
        <li><a href="">Europe/Russia</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
        <li><a href="">North America</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
        <li><a href="">United Kingdom</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
    </ul>
</div>

Мне нужно в основном переключить чек attr().

Как это сделать?

Ответ 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");
        }
    });
});