Включение / выключение флажков

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

 $(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, поэтому в этой ситуации это обычно предпочтительнее.

 //this toggles the checkbox, and fires its event if it has $('input[type=checkbox]').trigger('click'); //or $('input[type=checkbox]').click(); 

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

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

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

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

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

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

 $(document).ready(function(){ $('#checkp').toggle( function () { $('.check').attr('Checked','Checked'); }, function () { $('.check').removeAttr('Checked'); } ); }); 

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

 $("#select-all-teammembers").click(function() { $("input[name=recipients\\[\\]]").trigger('click'); }); 

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

 $("input[name=recipients\\[\\]]").prop('checked', function(_, checked) { return !checked; }); 

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

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

затем

 $('#myCheckBox').toggleCheck(); 

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

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

или

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

или

  function toggleAll(sender) { $(".checkBoxes").prop("checked", sender.checked); } 

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

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

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

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

 jQuery("#checker").click(function(){ jQuery("#mydiv :checkbox").each(function(){ this.checked = true; }); }); jQuery("#dechecker").click(function(){ jQuery("#mydiv :checkbox").each(function(){ this.checked = false; }); }); jQuery("#checktoggler").click(function(){ jQuery("#mydiv :checkbox").each(function(){ this.checked = !this.checked; }); }); 

😉

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

 $(function() { $("#checkbox-toggle").click(function() { $('input[type=checkbox][name=checkbox_id\\[\\]]').click(); }); }); 

Просто нужно вызвать событие щелчка флажка, когда пользователь нажимает кнопку с id ‘# checkbox-toggle’.

Лучший подход и UX

 $('.checkall').on('click', function() { var $checks = $('checks'); var $ckall = $(this); $.each($checks, function(){ $(this).prop("checked", $ckall.prop('checked')); }); }); $('checks').on('click', function(e){ $('.checkall').prop('checked', false); }); 

 
 
 
 
 Select All 
 
#ID
 
 
 
 
 
 
{{ order.id }}
 
 
 
 
{{ order.id }}
 
 
  

Пытаться:

 $(".table-datatable .select_all").on('click', function () { $("input[name^='order']").prop('checked', function (i, val) { return !val; }); }); 

Самый простой пример:

 // get DOM elements var checkbox = document.querySelector('input'), button = document.querySelector('button'); // bind "cilck" event on the button button.addEventListener('click', toggleCheckbox); // when clicking the button, toggle the checkbox function toggleCheckbox(){ checkbox.checked = !checkbox.checked; }; 

  Toggle checkbox 

просто вы можете использовать это

 $("#chkAll").on("click",function(){ $("input[name=checkBoxName]").prop("checked",$(this).prop("checked")); }); 

если вы хотите переключать каждый блок отдельно (или просто один блок работает так же хорошо):

Я рекомендую использовать .each (), так как его легко модифицировать, если вы хотите, чтобы произошли разные вещи и все еще относительно короткие и легко читаемые.

например:

 // toggle all checkboxes, not all at once but toggle each one for its own checked state: $('input[type="checkbox"]').each(function(){ this.checked = ! this.checked }); // check al even boxes, uncheck all odd boxes: $('input[type="checkbox"]').each(function(i,cb){ cb.checked = (i%2 == 0); }); // set all to checked = x and only trigger change if it actually changed: x = true; $('input[type="checkbox"]').each(function(){ if(this.checked != x){ this.checked = x; $(this).change();} }); 

на стороне примечания … не уверен, почему каждый использует .attr () или .prop () для (un) проверки вещей.

Насколько я знаю, element.checked всегда работал одинаково во всех браузерах?

по моему мнению, самый правильный человек, предложивший нормальный вариант, – GigolNet Gigolashvili, но я хочу предложить еще более красивый вариант. Проверь это

 $(document).on('click', '.fieldWrapper > label', function(event) { event.preventDefault() var n = $( event.target ).parent().find('input:checked').length var m = $( event.target ).parent().find('input').length x = n==m? false:true $( event.target ).parent().find('input').each(function (ind, el) { // $(el).attr('checked', 'checked'); this.checked = x }) }) 

Установка «checked» или null вместо true или false соответственно будет выполнять работу.

 // checkbox selection var $chk=$(':checkbox'); $chk.prop('checked',$chk.is(':checked') ? null:'checked'); 

Это очень хорошо для меня.

  $("#checkall").click(function() { var fruits = $("input[name=fruits\\[\\]]"); fruits.prop("checked", $(this).prop("checked")); }); 

Этот код переключит этот флажок, щелкнув любой аниматор тумблера, используемый в веб-шаблонах. Замените «.onoffswitch-label» как ansible в вашем коде. «checkboxID» – это установленный здесь флажок.

 $('.onoffswitch-label').click(function () { if ($('#checkboxID').prop('checked')) { $('#checkboxID').prop('checked', false); } else { $('#checkboxID').prop('checked', true); } }); 

Вот способ jQuery для переключения флажков без необходимости выбора флажка с помощью html5 и ярлыков:

  
 Compare to Last Year
   Retail units    Retail Dollars    GP Dollars    GP Percent  
 $("input[name='VIEW']:checkbox").change(function() { if($(this).is(':checked')) { $("input[name='VIEW']:checkbox").prop("checked", false); $("input[name='VIEW']:checkbox").parent('.normal').removeClass("checked"); $(this).prop("checked", true); $(this).parent('.normal').addClass('checked'); } else{ $("input[name='VIEW']").prop("checked", false); $("input[name='VIEW']").parent('.normal').removeClass('checked'); } }); 

http://www.bootply.com/A4h6kAPshx

Ну, есть более простой способ

Сначала Дайте вашим флажкам пример classа ‘id_chk’

Затем внутри флажка, который будет управлять флажками «id_chk», поставит:

Все, надеюсь, это поможет