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

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

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

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

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

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

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

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

    Затем позвоните:

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

    Предупреждение: использование attr () или prop () для изменения состояния флажка не запускает событие изменения в большинстве браузеров, с которыми я тестировал. Проверенное состояние изменится, но не будет пузырьков событий. Вы должны запустить событие изменения вручную после установки атрибута 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 }); 

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

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

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

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

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

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

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

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

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

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

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

    к этому:

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

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

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

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

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

    Простое решение

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

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

     
    $("img.avatar").click(function(){ var op = !$(this).parent().find(':checkbox').attr('checked'); $(this).parent().find(':checkbox').attr('checked', op); });
      $('controlCheckBox').click(function(){ var temp = $(this).prop('checked'); $('controlledCheckBoxes').prop('checked', temp); }); 
    Давайте будем гением компьютера.