Controlla se la casella è selezionata con jQuery

Come posso verificare se una casella di controllo in un array di caselle di controllo è selezionata usando l’id dell’array checkbox?

Sto usando il seguente codice, ma restituisce sempre il conteggio delle caselle spuntate indipendentemente dall’ID.

function isCheckedById(id) { alert(id); var checked = $("input[@id=" + id + "]:checked").length; alert(checked); if (checked == 0) { return false; } else { return true; } } 

Gli ID devono essere unici nel tuo documento, il che significa che non dovresti farlo:

   

Invece, rilascia l’ID, quindi selezionali per nome o per un elemento contenente:

 

E ora il jQuery:

 var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0; //there should be no space between identifier and selector // or, without the container: var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0; 
 $('#' + id).is(":checked") 

Questo succede se la casella è selezionata.

Per un array di checkbox con lo stesso nome è ansible ottenere l’elenco di quelli controllati da:

 var $boxes = $('input[name=thename]:checked'); 

Quindi per scorrere in sequenza e vedere cosa è controllato puoi fare:

 $boxes.each(function(){ // Do stuff here with this }); 

Per trovare quanti sono controllati puoi fare:

 $boxes.length; 
 $('#checkbox').is(':checked'); 

Il codice sopra riportato restituisce true se la casella di controllo è selezionata o falsa se non lo è.

Tutti i seguenti metodi sono utili:

 $('#checkbox').is(":checked") $('#checkbox').prop('checked') $('#checkbox')[0].checked $('#checkbox').get(0).checked 

Si consiglia di evitare DOMelement o inline “this.checked” anziché utilizzare jQuery sul metodo listener di eventi.

codice jQuery per verificare se la casella di controllo è selezionata o meno:

 if($('input[name="checkBoxName"]').is(':checked')) { // checked }else { // unchecked } 

In alternativa:

 if($('input[name="checkBoxName"]:checked')) { // checked }else{ // unchecked } 

Il concetto più importante da ricordare sull’attributo verificato è che non corrisponde alla proprietà verificata. L’attributo corrisponde effettivamente alla proprietà defaultChecked e deve essere utilizzato solo per impostare il valore iniziale della casella di controllo. Il valore dell’attributo verificato non cambia con lo stato della casella di controllo, mentre la proprietà selezionata fa. Pertanto, il modo compatibile con i browser per determinare se una casella di controllo è selezionata consiste nell’utilizzare la proprietà

Tutti i metodi di seguito sono possibili

 elem.checked $(elem).prop("checked") $(elem).is(":checked") 

Puoi usare questo codice,

 if($("#checkboxId").is(':checked')){ // Code in the case checkbox is checked. } else { // Code in the case checkbox is NOT checked. } 

Puoi provare questo:

       

Secondo la documentazione di jQuery ci sono i seguenti modi per verificare se una casella di controllo è selezionata o meno. Prendiamo ad esempio una casella di controllo (Controlla Working jsfiddle con tutti gli esempi)

  

Esempio 1: con selezionato

 $("#test-with-checked").on("click", function(){ if(mycheckbox.checked) { alert("Checkbox is checked."); } else { alert("Checkbox is unchecked."); } }); 

Esempio 2 – Con jQuery è, NOTA:: selezionato

 var check; $("#test-with-is").on("click", function(){ check = $("#mycheckbox").is(":checked"); if(check) { alert("Checkbox is checked."); } else { alert("Checkbox is unchecked."); } }); 

Esempio 3 – Con prop jQuery

 var check; $("#test-with-prop").on("click", function(){ check = $("#mycheckbox").prop("checked"); if(check) { alert("Checkbox is checked."); } else { alert("Checkbox is unchecked."); } }); 

Controllare Working jsfiddle

Puoi utilizzare uno qualsiasi dei seguenti codici consigliati da jquery.

 if ( elem.checked ) {}; if ( $( elem ).prop( "checked" ) ) {}; if ( $( elem ).is( ":checked" ) ) {}; 

Puoi farlo semplicemente come;

Fiddle che lavora

HTML

  

jQuery

 $(document).ready(function () { var ckbox = $('#checkbox'); $('input').on('click',function () { if (ckbox.is(':checked')) { alert('You have Checked it'); } else { alert('You Un-Checked it'); } }); }); 

o ancora più semplice;

 $("#checkbox").attr("checked") ? alert("Checked") : alert("Unchecked"); 

Se la checkbox è selezionata, restituirà true altrimenti undefined

Demo semplice per il controllo e l’impostazione di una casella di controllo.

jsfiddle !

 $('.attr-value-name').click(function() { if($(this).parent().find('input[type="checkbox"]').is(':checked')) { $(this).parent().find('input[type="checkbox"]').prop('checked', false); } else { $(this).parent().find('input[type="checkbox"]').prop('checked', true); } }); 

Per la casella di controllo con un ID

  

puoi semplicemente farlo

 $("#id_input_checkbox13").prop('checked') 

otterrete true o false come valore di ritorno per la syntax precedente. Puoi usarlo nella clausola if come normale espressione booleana.

Solo per dire nel mio esempio la situazione era una finestra di dialogo che poi verificava la casella di controllo prima di chiudere la finestra di dialogo. Nessuno di sopra e Come verificare se una casella di controllo è selezionata in jQuery? e jQuery se la casella è selezionata non sembra funzionare.

Alla fine

   var fd=$('.cb#fd').is(':checked'); var rd= $('.cb#rd').is(':checked'); 

Questo ha funzionato in modo da chiamare la class quindi l’ID. piuttosto che solo l’ID. Potrebbe essere dovuto agli elementi DOM nidificati in questa pagina che hanno causato il problema. La soluzione era sopra.

Qualcosa del genere può aiutare

 togglecheckBoxs = function( objCheckBox ) { var boolAllChecked = true; if( false == objCheckBox.checked ) { $('#checkAll').prop( 'checked',false ); } else { $( 'input[id^="someIds_"]' ).each( function( chkboxIndex, chkbox ) { if( false == chkbox.checked ) { $('#checkAll').prop( 'checked',false ); boolAllChecked = false; } }); if( true == boolAllChecked ) { $('#checkAll').prop( 'checked',true ); } } } 

Attiva / distriggers casella di controllo

 $("#checkall").click(function(){ $("input:checkbox").prop( 'checked',$(this).is(":checked") ); }) 

In realtà, secondo jsperf.com , le operazioni DOM sono più veloci, quindi $ (). Prop () seguito da $ (). Is () !!

Ecco le syntax:

 var checkbox = $('#'+id); /* OR var checkbox = $("input[name=checkbox1]"); whichever is best */ /* The DOM way - The fastest */ if(checkbox[0].checked == true) alert('Checkbox is checked!!'); /* Using jQuery .prop() - The second fastest */ if(checkbox.prop('checked') == true) alert('Checkbox is checked!!'); /* Using jQuery .is() - The slowest in the lot */ if(checkbox.is(':checked') == true) alert('Checkbox is checked!!'); 

Personalmente preferisco .prop() . A differenza di .is() , può anche essere usato per impostare il valore.

So che l’OP vuole jquery ma nel mio caso JS puro era la risposta, quindi se qualcuno come me è qui e non ha jquery o non vuole usarlo, ecco la risposta JS:

 document.getElementById("myCheck").checked 

Restituisce vero se l’input con ID myCheck è selezionato e falso se non è selezionato.

Semplice come quella.

Usando questo codice puoi verificare che almeno una casella di controllo sia selezionata o meno in gruppi di caselle di controllo diversi o da più caselle di controllo. Usando questo non è necessario richiedere la rimozione di ID o ID dinamici. Questo codice funziona con gli stessi ID.

Link di riferimento

   ck1
ck2
ck3
ck4

usa il codice qui sotto