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

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

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

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

15 70
jquery onclick toggle

15 ответов:

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

 $(".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() до fetch текущее состояние нажатого флажка):

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

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

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

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

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

предупреждение: использование 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
});
11

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

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

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

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

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

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

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

1

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

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

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

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

для этого:

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

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

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

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

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

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

$('.offer').click(function(){
    var cc = $(this).attr('checked') == undefined  ? false : true;
    $(this).find(':checkbox').attr('checked',cc);
});
0
<label>
    <input
        type="checkbox"
        onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
    />
    Check all
</label>
0

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

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

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