Нажмите, чтобы переключиться с JQuery

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

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

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

70 голосов | спросил 3zzy 23 rdEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 23 Sep 2009 20:41:38 +0400 2009, 20:41:38

14 ответов


0

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

 $(".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 'флажок' (т. е. без использования 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);
 });
ответил karim79 23 rdEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 23 Sep 2009 20:46:57 +0400 2009, 20:46:57
0

Другой подход заключается в расширении jquery, например:

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

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

$('.offer').find(':checkbox').toggleCheckbox();
ответил Justin Tanner 13 62010vEurope/Moscow11bEurope/MoscowSat, 13 Nov 2010 09:24:59 +0300 2010, 09:24:59
0

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

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
});
ответил Tim Santeford 30 J000000Saturday11 2011, 00:53:47
0

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

$('.offer').toggle(function() {
    $(this).find(':checkbox').attr('checked', true);
}, function() {
    $(this).find(':checkbox').attr('checked', false);
});
ответил dcharles 23 rdEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 23 Sep 2009 20:46:48 +0400 2009, 20:46:48
0

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

$('.offer').click(function(){
    $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').attr('checked'));
});
ответил Thomas Seres 2 22010vEurope/Moscow11bEurope/MoscowTue, 02 Nov 2010 19:57:17 +0300 2010, 19:57:17
0

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

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

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

ответил Ross Mehlman 9 32011vEurope/Moscow11bEurope/MoscowWed, 09 Nov 2011 00:58:47 +0400 2011, 00:58:47
0

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

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
    return !val;
});
ответил miosser 8 MarpmSat, 08 Mar 2014 20:33:38 +04002014-03-08T20:33:38+04:0008 2014, 20:33:38
0

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

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

на это:

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

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

ответил inkedmn 23 rdEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 23 Sep 2009 20:44:17 +0400 2009, 20:44:17
0
$('.offer').click(function(){ 
    if ($(this).find(':checkbox').is(':checked'))
    {
        $(this).find(':checkbox').attr('checked', false); 
    }else{
        $(this).find(':checkbox').attr('checked', true); 
    }
});
ответил lod3n 23 rdEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 23 Sep 2009 20:46:38 +0400 2009, 20:46:38
0

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

ответил Kai 23 rdEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 23 Sep 2009 20:47:56 +0400 2009, 20:47:56
0
$('.offer').click(function() { 
    $(':checkbox', this).each(function() {
        this.checked = !this.checked;
    });
});
ответил Alex Barrett 23 rdEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 23 Sep 2009 21:25:07 +0400 2009, 21:25:07
0

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

$('.offer').click(function(){
    var cc = $(this).attr('checked') == undefined  ? false : true;
    $(this).find(':checkbox').attr('checked',cc);
});
ответил keithics 4 AMpWed, 04 Apr 2012 08:49:54 +040049Wednesday 2012, 08:49:54
0
<label>
    <input
        type="checkbox"
        onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
    />
    Check all
</label>
ответил dobs 24 FebruaryEurope/MoscowbFri, 24 Feb 2012 02:08:17 +0400000000amFri, 24 Feb 2012 02:08:17 +040012 2012, 02:08:17
0
    $('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
ответил mahmoh 16 J000000Tuesday13 2013, 06:58:58

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132