Ativar / desativar checkboxs de seleção

Eu tenho o seguinte:

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

Eu gostaria que o id="select-all-teammembers" quando clicado alternasse entre marcado e desmarcado. Idéias? que não são dezenas de linhas de código?

Você pode escrever:

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

Antes do jQuery 1.6, quando tínhamos apenas attr () e não prop () , escrevíamos:

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

Mas prop() tem uma semântica melhor que attr() quando aplicada a atributos HTML “booleanos”, então é geralmente preferível nessa situação.

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

Eu sei que isso é antigo, mas a questão era um pouco ambígua nessa alternância pode significar que cada checkbox de seleção deve alternar seu estado, seja lá o que for. Se você tiver 3 marcados e 2 desmarcados, a alternância tornaria os 3 primeiros desmarcados e os 2 últimos marcados.

Para isso, nenhuma das soluções aqui funciona, pois fazem com que todas as checkboxs de seleção tenham o mesmo estado, em vez de alternar o estado de cada checkbox de seleção. Fazendo $(':checkbox').prop('checked') em muitas checkboxs de seleção retorna o AND lógico entre todas as propriedades binárias .checked , ou seja, se uma delas estiver desmarcada, o valor retornado é false .

Você precisa usar .each() se você quiser realmente alternar cada estado da checkbox de seleção ao invés de torná-los todos iguais, por exemplo

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

Observe que você não precisa de $(this) dentro do manipulador, pois a propriedade .checked existe em todos os navegadores.

Aqui está outra maneira que você quer.

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

Eu acho mais simples apenas acionar um clique:

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

Desde o jQuery 1.6, você pode usar .prop(function) para alternar o estado verificado de cada elemento encontrado:

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

Use este plugin:

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

Então

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

A melhor maneira que posso pensar.

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

ou

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

ou

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

Assumindo que é uma imagem que tem que alternar a checkbox de seleção, isso funciona para mim

   

A checkbox de seleção Check-all deve ser atualizada em determinadas condições. Tente clicar em # # selecionar todos os membros da equipe , desmarque alguns itens e clique novamente em selecionar todos. Você pode ver inconsistência. Para evitar isso, use o seguinte truque:

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

BTW all checkboxes DOM-object deve ser armazenado em cache conforme descrito acima.

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

😉

Você pode escrever assim também

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

Só precisa chamar o evento click de checkbox de seleção quando o usuário clicar no botão com o id ‘# checkbox-toggle’.

Uma melhor abordagem e 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 }}

Experimentar:

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

O exemplo mais básico seria:

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

simplesmente você pode usar isso

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

se você quiser alternar cada checkbox individualmente (ou apenas uma checkbox funciona da mesma forma):

Eu recomendo usar .each (), pois é fácil modificar se você quiser que coisas diferentes aconteçam, e ainda relativamente curto e fácil de ler.

por exemplo :

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

em uma nota lateral … não tenho certeza porque todo mundo usa .attr () ou .prop () para (un) verificar as coisas.

Tanto quanto sei, o element.checked sempre funcionou da mesma forma em todos os navegadores?

na minha opinião, o homem mais correto que sugeriu variante normal é GigolNet Gigolashvili, mas eu quero sugerir uma variante ainda mais bonita. Confira

 $(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 }) }) 

Definir ‘checked’ ou null em vez de true ou false, respectivamente, fará o trabalho.

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

Este aqui funciona muito bem para mim.

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

Este código irá alternar a checkbox de seleção ao clicar em qualquer animador de alternância usado em modelos da web. Substitua “.onoffswitch-label” conforme disponível no seu código. “checkboxID” é a checkbox de seleção marcada aqui.

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

Aqui está uma maneira do jQuery de alternar as checkboxs de seleção sem precisar marcar uma checkbox de seleção com html5 e labels:

  

$("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

Bem, há uma maneira mais fácil

Primeiro Dê suas checkboxs de seleção um exemplo de class ‘id_chk’

Em seguida, dentro da checkbox de seleção que controlará o estado das checkboxs de seleção ‘id_chk’, coloque:

Isso é tudo, espero que isso ajude

    Intereting Posts