Toggle Caselle di controllo on/off

Question

Ho il seguente:

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

mi piacerebbe il id="select-all-teammembers" quando si fa clic per passare tra controllato e incontrollato. Idee? non sono decine di righe di codice?

Answer 1

Si può 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 abbiamo avuto solo attr() e non prop(), abbiamo usato per scrivere:

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

Ma prop() ha una semantica migliori rispetto a attr() se applicato a attributi HTML "booleani", quindi di solito è preferito in questa situazione.

Answer 2

Ecco un altro modo che desideri.

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

Answer 3

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

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

Answer 4

Supponendo che si tratta di un'immagine che ha per attivare o 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"> 

Answer 5

So che questo è vecchio, ma la domanda era un po 'ambigua che ginocchiera può significare che ogni checkbox dovrebbe alternare il suo stato, qualunque esso sia. Se hai selezionato 3 e 2 deselezionato, la commutazione renderebbe il primo 3 non selezionato e gli ultimi 2 selezionati.

Per questo, nessuna delle soluzioni qui funzionano come fare tutte le caselle di controllo hanno lo stesso stato, piuttosto che alternare lo stato di ciascuna casella di controllo. Effettuando $(':checkbox').prop('checked') su molte caselle di controllo viene restituita la logica AND tra tutte le proprietà binari .checked, ad esempio se una di esse è deselezionata, il valore restituito è false.

È necessario utilizzare .each() se si desidera effettivamente alternare 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 come la proprietà .checked esiste in tutti i browser.

Answer 6

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>

Answer 7

Penso che sia più semplice per innescare un semplice clic:

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

Answer 8

se si desidera attivare o disattivare ogni casella singolarmente (o solo uno scatola funziona altrettanto bene):

mi consiglia di utilizzare .each(), in quanto è facile da modificare se si vuole cose diverse per h appen, e ancora relativamente breve e facile da leggere.

ad es. :

// 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 un lato nota ... non so perché tutti usano.attr() o .prop() per (dis) controllare le cose.

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

Answer 9

Beh c'è un modo più semplice

Prima Lascia la tua caselle di un esempio di classe 'id_chk'

Poi all'interno wich casella di controllo controllerà caselle di controllo 'id_chk' Stato messo:

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

Questo è tutto, spero che questo aiuti

Answer 10

Utilizzare questo plugin:

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

    } 

Poi

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

Answer 11

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

;)

Answer 12

Controllare tutti-casella di controllo dovrebbe essere aggiornato stesso in determinate condizioni. Prova a fare clic su "# select-all-teammembers" quindi deseleziona alcuni elementi e fai nuovamente clic su select-all. Puoi vedere l'incoerenza. Per evitare che utilizzi 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')); 
    }); 

BTW tutte le caselle di controllo DOM-oggetto deve essere memorizzato nella cache come descritto sopra.

Answer 13

nella mia ipotesi, l'uomo più giusto che ha suggerito la variante normale è GigolNet Gigolashvili, ma voglio suggerire una variante ancora più bella. Controlla

Answer 14

L'impostazione 'checked' o null invece che true o false eseguirà il lavoro.

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

Answer 15

Dal momento che jQuery 1.6 è possibile utilizzare .prop(function) per attivare o disattivare lo stato controllato di ogni elemento trovato:

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

Answer 16

è possibile scrivere in questo modo anche

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

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

Answer 17

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

Answer 18

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

Prova:

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

Answer 19

Questo funziona molto bene per me.

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

Answer 20

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

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

Answer 21

Ecco un modo jQuery per attivare o disattivare le caselle di controllo, senza dover selezionare una casella di controllo con HTML5 & 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

Answer 22

Il modo migliore che posso pensare.

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

Answer 23

semplicemente si può usare questo

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