Ativar / desativar caixas de seleção

Eu tenho o seguinte:

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

Gostaria que id="select-all-teammembers"quando clicada alternasse entre marcado e desmarcado. Ideias? 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 semântica melhor do que attr()quando aplicado a atributos HTML "booleanos", portanto é geralmente preferido 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 pergunta era um pouco ambígua, pois alternar pode significar que cada caixa de seleção alterne seu estado, seja lá o que for. Se você tiver 3 marcados e 2 desmarcados, a alternância tornará os 3 primeiros desmarcados e os 2 últimos marcados.

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

Você precisa usar .each()se realmente deseja alternar cada estado da caixa de seleção em vez de torná-los todos iguais, por exemplo

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

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

Aqui está outra maneira que você deseja.

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

Eu acho que é mais simples acionar um clique:

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

A melhor maneira que eu consigo pensar.

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

ou

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

ou

<input onchange="toggleAll(this)">
function toggleAll(sender) {
    $(".checkBoxes").prop("checked", sender.checked);
}

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

Supondo que seja uma imagem que precise alternar a caixa de seleção, isso funciona para mim

<img src="something.gif" onclick="$('#checkboxid').prop('checked', !($('#checkboxid').is(':checked')));">
<input type="checkbox" id="checkboxid">

Check-tudo checkbox deve ser atualizado em si , sob certas condições. Tente clicar em '# selecionar todos os membros da equipe' , desmarque alguns itens e clique em selecionar todos novamente. Você pode ver inconsistência. Para impedi-lo, 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'));
  }); 

Aliás, todas as caixas de seleção do objeto DOM devem ser armazenadas em cache, conforme descrito acima.

Aqui está uma maneira do jQuery de alternar as caixas de seleção sem precisar selecionar uma caixa de seleção com html5 & labels:

 <div class="checkbox-list margin-auto">
    <label class="">Compare to Last Year</label><br>
    <label class="normal" for="01">
       <input id="01" type="checkbox" name="VIEW" value="01"> Retail units
    </label>
    <label class="normal" for="02">
          <input id="02" type="checkbox" name="VIEW" value="02">  Retail Dollars
    </label>
    <label class="normal" for="03">
          <input id="03" type="checkbox" name="VIEW" value="03">  GP Dollars
    </label>
    <label class="normal" for="04">
          <input id="04" type="checkbox" name="VIEW" value="04">  GP Percent
    </label>
</div>

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

se você deseja alternar cada caixa individualmente (ou apenas uma caixa também funciona):

Eu recomendo usar .each (), pois é fácil modificar se você deseja que diferentes coisas aconteçam e ainda seja 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 sei por que todo mundo usa .attr () ou .prop () para (des) verificar as coisas.

até onde eu sei, o element.checked sempre funcionou da mesma forma em todos os navegadores?

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 da caixa de seleção quando o usuário clicar no botão com o ID '# checkbox-toggle'.

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

<table class="table table-datatable table-bordered table-condensed table-striped table-hover table-responsive">
<thead>
    <tr>
        <th class="col-xs-1"><a class="select_all btn btn-xs btn-info"> Select All </a></th>
        <th class="col-xs-2">#ID</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><input type="checkbox" name="order333"/></td>
        <td>{{ order.id }}</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="order334"/></td>
        <td>{{ order.id }}</td>
    </tr>
</tbody>                  
</table>

Tentar:

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

Este funciona muito bem para mim.

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

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

<input type="checkbox">
<button>Toggle checkbox</button>

simplesmente você pode usar isso

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

no meu palpite, o homem mais correto que sugeriu a variante normal é o 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 'marcado' ou nulo em vez de verdadeiro ou falso, respectivamente, fará o trabalho.

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

Esse código alternará a caixa 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 caixa de seleção alternada aqui.

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

Bem, há uma maneira mais fácil

Primeiro, dê às suas caixas de seleção um exemplo de classe 'id_chk'

Em seguida, dentro da caixa de seleção que controlará as caixas de seleção 'id_chk', coloque:

<input type='checkbox' onchange='js:jQuery(".id_chk").prop("checked", jQuery(this).prop("checked"))' />

Isso é tudo, espero que isso ajude