Нажмите кнопку переключения с помощью jQuery

Я использовал функцию наведения, где вы делаете x на курсор мыши и y и mouseout. Я пытаюсь сделать то же самое для клика, но он не работает:

$('.offer').click(function(){ 
  $(this).find(':checkbox').attr('checked', true ); 
},function(){
  $(this).find(':checkbox').attr('checked', false ); 
});

Я хочу, чтобы флажок был отмечен при нажатии на div и не отмечен, если щелкнуть его снова - щелчок.

Ответ 1

Это легко сделать, щелкнув текущее "проверенное" состояние флажка при каждом нажатии. Примеры:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.attr('checked'));
 });

или

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.is(':checked'));
 });

или, непосредственно манипулируя свойством DOM 'checked' (т.е. не используя attr() для выбора текущего состояния щелчка):

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox[0].checked);
 });

... и т.д.

Примечание: поскольку jQuery 1.6, флажки должны быть установлены с помощью prop not attr:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.prop('checked', !$checkbox[0].checked);
 });

Ответ 2

Другим подходом было бы расширение jquery следующим образом:

$.fn.toggleCheckbox = function() {
    this.attr('checked', !this.attr('checked'));
}

Затем вызовите:

$('.offer').find(':checkbox').toggleCheckbox();

Ответ 3

Предупреждение: используя attr() или prop(), чтобы изменить состояние флажка не, загорится событие change в большинстве браузеров, с которыми я тестировал. Проверенное состояние изменится, но не будет пузырьков событий. Вы должны запустить событие изменения вручную после установки атрибута checked. У меня были некоторые другие обработчики событий, контролирующие состояние флажков, и они отлично работали бы с прямыми пользовательскими кликами. Тем не менее, установка контролируемого состояния программно не позволяет последовательно запускать событие изменения.

jQuery 1.6

$('.offer').bind('click', function(){ 
    var $checkbox = $(this).find(':checkbox');
    $checkbox[0].checked = !$checkbox[0].checked;
    $checkbox.trigger('change'); //<- Works in IE6 - IE9, Chrome, Firefox
});

Ответ 4

Вы можете использовать функцию toggle:

$('.offer').toggle(function() {
    $(this).find(':checkbox').attr('checked', true);
}, function() {
    $(this).find(':checkbox').attr('checked', false);
});

Ответ 5

Почему не в одной строке?

$('.offer').click(function(){
    $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').attr('checked'));
});

Ответ 6

У меня есть один флажок с именем chkDueDate и объект HTML с событием click следующим образом:

$('#chkDueDate').attr('checked', !$('#chkDueDate').is(':checked'));

Щелчок по объекту HTML (в данном случае a <span>) переключает проверенное свойство флажка.

Ответ 7

jQuery: лучший способ, делегировать действия jQuery (jQuery = jQuery).

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
    return !val;
});

Ответ 8

попробуйте изменить это:

$(this).find(':checkbox').attr('checked', true );

$(this).find(':checkbox').attr('checked', 'checked');

Не уверен, что 100% это будет сделано, но я, похоже, напоминаю, что у меня есть аналогичная проблема. Удачи!

Ответ 9

$('.offer').click(function(){ 
    if ($(this).find(':checkbox').is(':checked'))
    {
        $(this).find(':checkbox').attr('checked', false); 
    }else{
        $(this).find(':checkbox').attr('checked', true); 
    }
});

Ответ 10

В JQuery я не думаю, что click() принимает две функции для переключения. Для этого вы должны использовать функцию toggle(): http://docs.jquery.com/Events/toggle

Ответ 11

$('.offer').click(function() { 
    $(':checkbox', this).each(function() {
        this.checked = !this.checked;
    });
});

Ответ 12

<label>
    <input
        type="checkbox"
        onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
    />
    Check all
</label>

Ответ 13

Самое простое решение

$('.offer').click(function(){
    var cc = $(this).attr('checked') == undefined  ? false : true;
    $(this).find(':checkbox').attr('checked',cc);
});

Ответ 14

Другое альтернативное решение для переключения значения флажка:

<div id="parent">
    <img src="" class="avatar" />
    <input type="checkbox" name="" />
</div>


$("img.avatar").click(function(){

    var op = !$(this).parent().find(':checkbox').attr('checked');
    $(this).parent().find(':checkbox').attr('checked', op);

});

Ответ 15

    $('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});