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

Question

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

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

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

Answer 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 нет attr:

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

Answer 2

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

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

Тогда позвоните:

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

Answer 3

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

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
});

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

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

Answer 7

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

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

Answer 8

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

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

к этому:

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

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

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

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

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

Answer 13

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

Answer 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);

});

Answer 15

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