Ativar / desativar caixas de seleção


397

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?

Respostas:


723

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.


4
Isso pode ficar estranho, pois baseia o status do primeiro (por isso, se o usuário verificar o primeiro, usar a alternância, eles ficarão fora de sincronia). Ligeiramente aprimorado para basear o status fora da alternância, não a primeira caixa de seleção da lista: $ ("input [name = recipients \ [\]]"). Prop ("marcada", $ (this) .prop (" verificado"));
CookiesForDevo

6
Usar 'prop' também funciona para o Zepto. Caso contrário, ele marcará a caixa, mas não a desmarcará.
SimplGy

11
"prop" em vez de "attr" fez o truque: com "attr" alterna por um tempo e depois para, com "prop" alterna conforme o esperado. +1 para a atualização.
TechNyquist

11
$('input[type=checkbox]').trigger('click');mencionado por @ 2astalavista abaixo é mais sucinto e também aciona o evento "change".
aqui

11
você pode editar sua resposta para suporte de @ CookiesForDevo resposta
acquayefrank

213
//this toggles the checkbox, and fires its event if it has    

$('input[type=checkbox]').trigger('click'); 
//or
$('input[type=checkbox]').click(); 

Funciona no chrome 29, mas não no FF 17.0.7, alguém pode confirmar isso?
Griddo # 1/13

Eu estava no caminho de mudar de propriedade há tanto tempo. Para mim, essa é uma abordagem excelente e mais flexível para marcar e desmarcar os elementos da caixa de seleção.
Isioma Nnodum

Evento indesejado é acionado.
Jehong Ahn 27/11/19

Para caixas de seleção, geralmente é mais aconselhável acionar o evento 'change', pois elas podem ser alteradas clicando em um rótulo.
Peter Lenjo 15/01

61

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.


5
Sim, esta é a resposta correta para alternar o estado de todas as caixas de seleção!
Sydwell

11
Ordens de magnitude mais rápidas do que acionar o clique com o jQuery quando você tem muitas caixas de seleção.
Jeremy Cook

16

Aqui está outra maneira que você deseja.

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

9
Isso não é alternar.
AgentFire

2
@kst - Este é um método melhor $ ('input [name = recipients \ [\]]'). toggle (this.checked); Esqueça as aulas.
Davis

11

Eu acho que é mais simples acionar um clique:

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

9

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

8

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

Excelente resposta. Você sabe mais sobre passar o sublinhado como o primeiro parâmetro? Onde eu poderia aprender mais sobre isso?
User1477388 09/09

11
Edit: Aparentemente, é essencialmente um meio de passar nulo stackoverflow.com/questions/11406823/…
user1477388

8

Use este plugin:

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

   }

Então

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

2

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

4
Como esta é sua primeira resposta, perceba que geralmente é melhor seguir o padrão usado no cartaz na pergunta - como colocar o código jQuery no manipulador de documentos prontos e não alinhado na marcação. Se você tiver um motivo para NÃO fazer isso, adicione explicações sobre o motivo.
Mark Schultheiss

2

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.


2

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


1

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?


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

;)


1

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'.


1

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

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

1

Este funciona muito bem para mim.

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

11
você percebe que está dando à propriedade "marcada" o mesmo valor que ela já possui, certo? não é um pouco embaraçoso? você obviamente quis colocar um !sinal antes dele ..
vsync

1

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>


1

simplesmente você pode usar isso

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

0

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

0

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

0

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

-3

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.