Включить / выключить флажки - PullRequest
Новая
       39

Включить / выключить флажки

375 голосов
/ 14 ноября 2010

У меня есть следующее: 

$(document).ready(function()
{
    $("#select-all-teammembers").click(function() {
        $("input[name=recipients\\[\\]]").attr('checked', true);
    });                 
});

Я бы хотел, чтобы id="select-all-teammembers" при нажатии переключался между отмеченным и не отмеченным.Идеи?это не десятки строк кода?

Ответы [ 23 ]

685 голосов
/ 14 ноября 2010

Вы можете написать: 

$(document).ready(function() {
    $("#select-all-teammembers").click(function() {
        var checkBoxes = $("input[name=recipients\\[\\]]");
        checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    });                 
});

До jQuery 1.6, когда у нас было только attr () , а не prop () , мы использовали для записи:

checkBoxes.attr("checked", !checkBoxes.attr("checked"));

Но prop() имеет лучшую семантику, чем attr(), когда применяется к "логическим" атрибутам HTML, поэтому обычно это предпочтительнее в этой ситуации.

199 голосов
/ 18 мая 2012 
//this toggles the checkbox, and fires its event if it has    

$('input[type=checkbox]').trigger('click'); 
//or
$('input[type=checkbox]').click();
58 голосов
/ 20 марта 2013

Я знаю, что это старый, но вопрос был немного двусмысленным в том, что toggle может означать, что каждый флажок должен переключать свое состояние, что бы это ни было.Если вы отметили 3 и 2 не отмечены, переключение сделает первые 3 не проверенными, а последние 2 проверенными.

Для этого ни одно из решений здесь не работает, поскольку они заставляют все флажки иметь одинаковое состояние, а не переключать состояние каждого флажка.Выполнение $(':checkbox').prop('checked') для многих флажков возвращает логическое И между всеми двоичными свойствами .checked, т. Е. Если одно из них не проверено, возвращается значение false.

Вам необходимо использовать .each(), если выхотите на самом деле переключать каждое состояние флажка, а не делать их равными, например, 

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

Обратите внимание, что вам не нужен $(this) внутри обработчика, поскольку свойство .checked существует во всех браузерах.

16 голосов
/ 14 ноября 2010

Вот еще один способ, который вы хотите. 

$(document).ready(function(){   
    $('#checkp').toggle(
        function () { 
            $('.check').attr('Checked','Checked'); 
        },
        function () { 
            $('.check').removeAttr('Checked'); 
        }
    );
});
9 голосов
/ 04 июня 2013

Я думаю, что проще просто вызвать клик: 

$("#select-all-teammembers").click(function() {
    $("input[name=recipients\\[\\]]").trigger('click');
});
8 голосов
/ 17 марта 2014

Начиная с jQuery 1.6 вы можете использовать .prop(function) для переключения проверенного состояния каждого найденного элемента: 

$("input[name=recipients\\[\\]]").prop('checked', function(_, checked) {
    return !checked;
});
7 голосов
/ 16 августа 2013

Используйте этот плагин: 

$.fn.toggleCheck  =function() {
       if(this.tagName === 'INPUT') {
           $(this).prop('checked', !($(this).is(':checked')));
       }

   }

Тогда 

$('#myCheckBox').toggleCheck();
6 голосов
/ 28 сентября 2016

Лучший способ придумать. 

$('#selectAll').change(function () {
    $('.reportCheckbox').prop('checked', this.checked);
});

или 

$checkBoxes = $(".checkBoxes");
$("#checkAll").change(function (e) {
    $checkBoxes.prop("checked", this.checked);
});

или 

<input onchange="toggleAll(this)">
function toggleAll(sender) {
    $(".checkBoxes").prop("checked", sender.checked);
}
2 голосов
/ 31 мая 2012

Если предположить, что это изображение имеет флажок, это работает для меня 

<img src="something.gif" onclick="$('#checkboxid').prop('checked', !($('#checkboxid').is(':checked')));">
<input type="checkbox" id="checkboxid">
2 голосов
/ 26 сентября 2013

Check-all checkbox должен быть обновлен сам при определенных условиях. Попробуйте нажать на '# select-all-teammembers' , затем снимите отметку с нескольких пунктов и снова нажмите select-all. Вы можете увидеть несоответствие. Чтобы предотвратить это, используйте следующий трюк: 

  var checkBoxes = $('input[name=recipients\\[\\]]');
  $('#select-all-teammembers').click(function() {
    checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    $(this).prop("checked", checkBoxes.is(':checked'));
  });

Кстати, все флажки DOM-объекта должны быть кэшированы, как описано выше.

Страница:
...