Attiva / disattiva le caselle di controllo


397

Ho il seguente:

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

Vorrei che id="select-all-teammembers"quando si fa clic per passare da selezionato a deselezionato. Idee? che non sono dozzine di righe di codice?

Risposte:


723

Tu puoi scrivere:

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

Prima di jQuery 1.6, quando avevamo solo attr () e non prop () , scrivevamo:

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

Ma prop()ha una semantica migliore rispetto a attr()quando applicata ad attributi HTML "booleani", quindi di solito è preferita in questa situazione.


4
Questo può diventare tangibile in quanto basa lo stato del primo (quindi se l'utente controlla il primo, quindi usa l'interruttore, usciranno dalla sincronizzazione). Leggermente modificato in modo da basare lo stato sull'interruttore, non sulla prima casella di controllo nell'elenco: $ ("input [nome = destinatari \ [\]]"). Prop ("controllato", $ (questo) .prop (" controllato "));
CookiesPerDevo,

6
L'uso di 'prop' fa funzionare questo anche per Zepto. Altrimenti selezionerà la casella, ma non la deselezionerà.
Semplicamente dal

1
"prop" invece di "attr" ha fatto il trucco: con "attr" si alterna per un po 'e poi si ferma, con "prop" invece si attiva come previsto. +1 per l'aggiornamento.
TechNyquist

11
$('input[type=checkbox]').trigger('click');menzionato da @ 2astalavista di seguito è più conciso e attiva anche l'evento "modifica".
qui,

1
potresti modificare la tua risposta per supportare la risposta di @ CookiesForDevo
acquayefrank

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

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

Funziona in Chrome 29 ma non in FF 17.0.7, qualcuno può confermarlo?
Griddo,

Avevo seguito la strada del cambio di proprietà per così tanto tempo. Per me questo è un approccio eccellente e più flessibile per selezionare e deselezionare gli elementi della casella di controllo.
Isioma Nnodum,

L'evento indesiderato viene attivato.
Jehong Ahn,

Per le caselle di controllo, è generalmente consigliabile attivare l'evento "modifica", poiché potrebbero essere modificati facendo clic su un'etichetta.
Peter Lenjo,

61

So che questo è vecchio ma la domanda era un po 'ambigua in quanto l' interruttore potrebbe significare che ogni casella di controllo dovrebbe cambiare il suo stato, qualunque esso sia. Se hai 3 selezionato e 2 deselezionato, la commutazione renderebbe i primi 3 deselezionati e gli ultimi 2 controllati.

Per questo, nessuna delle soluzioni qui funziona in quanto fanno sì che tutte le caselle di controllo abbiano lo stesso stato, anziché attivare / disattivare lo stato di ciascuna casella di controllo. Fare $(':checkbox').prop('checked')su molte caselle di controllo restituisce l'AND logico tra tutte .checkedle proprietà binarie, ovvero se una di esse è deselezionata, il valore restituito è false.

È necessario utilizzare .each()se si desidera effettivamente attivare / disattivare ogni stato della casella di controllo anziché renderli tutti uguali, ad es

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

Si noti che non è necessario $(this)all'interno del gestore poiché la .checkedproprietà esiste in tutti i browser.


5
Sì, questa è la risposta corretta per attivare / disattivare lo stato di tutte le caselle di controllo!
Sydwell,

1
Gli ordini di grandezza sono più rapidi rispetto all'attivazione del clic con jQuery quando si hanno molte caselle di controllo.
Jeremy Cook,

16

Ecco un altro modo che vuoi.

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

9
Questo non è commutabile.
AgentFire,

2
@kst - Questo è un metodo migliore $ ('input [nome = destinatari \ [\]]'). toggle (this.checked); Dimentica le lezioni.
Davis,

11

Penso che sia più semplice innescare un clic:

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

9

Il modo migliore che mi viene in mente.

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

o

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

o

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

8

Da jQuery 1.6 è possibile utilizzare .prop(function)per attivare / disattivare lo stato controllato di ciascun elemento trovato:

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

Risposta eccellente. Ti capita di sapere di più sul passaggio del trattino basso come primo parametro? Dove posso saperne di più?
user1477388

1
Edit: A quanto pare, è essenzialmente un mezzo per passare NULL stackoverflow.com/questions/11406823/...
user1477388

8

Usa questo plugin:

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

   }

Poi

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

2

Supponendo che sia un'immagine che deve attivare / disattivare la casella di controllo, questo funziona per me

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

4
Poiché questa è la tua prima risposta, renditi conto che molto spesso è meglio seguire lo schema usato dal poster nella domanda - come mettere il codice jQuery nel gestore del documento pronto e non in linea nel markup. SE hai un motivo per NON farlo, aggiungi spiegazioni sul perché.
Mark Schultheiss,

2

Controllare tutti i-casella di controllo dovrebbe essere aggiornato per sé in determinate condizioni. Prova a fare clic su "# select-all-teammembers", quindi deseleziona alcuni elementi e fai nuovamente clic su select-all. Puoi vedere un'incoerenza. Per impedirlo usa il seguente trucco:

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

A proposito, tutte le caselle DOM-oggetto dovrebbero essere memorizzate nella cache come descritto sopra.


2

Ecco un modo jQuery per attivare / disattivare le caselle di controllo senza dover selezionare una casella di controllo con html5 ed etichette:

 <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 vuoi attivare / disattivare ciascuna casella singolarmente (o solo una casella funziona altrettanto bene):

Ti consiglio di usare .each (), poiché è facile modificarlo se vuoi che accadano cose diverse, e comunque relativamente breve e facile da leggere.

per esempio :

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

su una nota a margine ... non so perché tutti usano .attr () o .prop () per (un) controllare le cose.

per quanto ne so, element.checked ha sempre funzionato allo stesso modo in tutti i browser?


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

Puoi anche scrivere così

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

Devo solo chiamare l'evento click della casella di controllo quando l'utente fa clic sul pulsante con ID '# checkbox-toggle'.


1

Un approccio migliore 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>

Provare:

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

1

Questo funziona molto bene per me.

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

1
ti rendi conto che stai dando alla proprietà "checked" lo stesso valore esatto che ha già, giusto? non è un po 'imbarazzante? ovviamente intendevi mettere un !cartello davanti ad esso ..
vsync,

1

L'esempio più semplice sarebbe:

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

semplicemente puoi usarlo

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

0

a mio avviso, l'uomo più giusto che ha suggerito la variante normale è GigolNet Gigolashvili, ma voglio suggerire una variante ancora più bella. Controllalo

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

L'impostazione 'controllato' o null invece di vero o falso rispettivamente farà il lavoro.

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

0

Questo codice attiva o disattiva la casella di controllo facendo clic su un qualsiasi animatore di interruttore a levetta utilizzato nei modelli Web. Sostituisci ".onoffswitch-label" come disponibile nel tuo codice. "checkboxID" è la casella di controllo attivata / disattivata qui.

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

-3

Bene c'è un modo più semplice

Prima di tutto dai alle tue caselle un esempio di classe 'id_chk'

Quindi all'interno della casella di controllo che controllerà lo stato delle caselle di controllo 'id_chk':

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

Questo è tutto, spero che questo aiuti

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.