Controlla se la casella è selezionata con jQuery

Come posso verificare se una casella di controllo in un array casella di controllo è selezionata utilizzando l'id dell'array checkbox?

Sto usando il seguente codice, ma restituisce sempre il conteggio delle caselle di controllo selezionate 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 univoci nel tuo documento, il che significa che non dovresti farlo:

<input type="checkbox" name="chk[]" id="chk[]" value="Apples" />
<input type="checkbox" name="chk[]" id="chk[]" value="Bananas" />

Rilascia invece l'ID, quindi selezionali per nome o tramite un elemento contenente:

<fieldset id="checkArray">
    <input type="checkbox" name="chk[]" value="Apples" />

    <input type="checkbox" name="chk[]" value="Bananas" />
</fieldset>

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

Ciò si ottiene se la casella di controllo è selezionata.

Per una serie di caselle con lo stesso nome è possibile ottenere l'elenco di caselle selezionate:

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

Quindi per scorrere attraverso di loro e vedere cosa è selezionato puoi fare:

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

Per scoprire quanti sono selezionati puoi fare:

$boxes.length;

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

Il codice sopra riportato restituisce true se la casella di controllo è selezionata o false in caso contrario.

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" invece di usare il listener di eventi jQuery on method.

Codice jQuery per verificare se la casella è 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 controllato è che non corrisponde alla proprietà controllata. 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 controllato non cambia con lo stato della casella di controllo, mentre la proprietà selezionata lo fa. Pertanto, il modo compatibile con più browser per determinare se una casella di controllo è selezionata consiste nell'utilizzare la proprietà

Sono possibili tutti i metodi seguenti

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

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

<input type="checkbox" name="mycheckbox" id="mycheckbox" />
<br><br>
<input type="button" id="test-with-checked" value="Test with checked" />
<input type="button" id="test-with-is" value="Test with is" />
<input type="button" id="test-with-prop" value="Test with prop" />

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

Controlla Working jsfiddle

Puoi provare questo:

<script>
function checkAllCheckBox(value)
{
   if($('#select_all_').is(':checked')){
   $(".check_").attr ( "checked" ,"checked" );
    }
    else
    {
        $(".check_").removeAttr('checked');
    }

 }

</script>
<input type="checkbox" name="chkbox" id="select_all_" value="1" />


<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />

È possibile utilizzare uno dei seguenti codici consigliati da jquery.

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

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'ingresso con ID myCheck è selezionato e falso se non è controllato.

Semplice come quella.

Puoi farlo semplicemente come;

Fiddle di lavoro

HTML

<input id="checkbox" type="checkbox" />

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 anche più semplice;

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

Se l' checkboxopzione è selezionata, verrà restituita truediversamenteundefined

Questa è anche un'idea che uso frequentemente:

var active = $('#modal-check-visible').prop("checked") ? 1 : 0 ;

Se sfacciato, restituirà 1; altrimenti restituirà 0.

Demo semplice per selezionare e impostare 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);
    }
});

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

Alla fine

<input class="cb" id="rd" type="checkbox">
<input class="cb" id="fd" type="checkbox">

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

Questo ha funzionato così chiamando la classe quindi l'ID. piuttosto che solo l'ID. Potrebbe essere dovuto agli elementi DOM nidificati in questa pagina che causano il problema. La soluzione era sopra.

Per la casella di controllo con un ID

<input id="id_input_checkbox13" type="checkbox"></input>

puoi semplicemente fare

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

otterrai trueo falsecome valore di ritorno per la sintassi sopra. Puoi usarlo nella clausola if come normale espressione booleana.

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

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

Ecco le sintassi:

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(). Diversamente .is(), può anche essere usato per impostare il valore.

Attiva / disattiva la casella di controllo selezionata

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

Utilizzando questo codice è possibile selezionare almeno una casella di controllo selezionata o meno in diversi gruppi di caselle di controllo o da più caselle di controllo. Utilizzando questo non è possibile richiedere la rimozione di ID o ID dinamici. Questo codice funziona con gli stessi ID.

Link di riferimento

<label class="control-label col-sm-4">Check Box 2</label>
    <input type="checkbox" name="checkbox2" id="checkbox21" value=ck1 /> ck1<br />
    <input type="checkbox" name="checkbox2" id="checkbox22" value=ck2 /> ck2<br />

<label class="control-label col-sm-4">Check Box 3</label>
    <input type="checkbox" name="checkbox3" id="checkbox31" value=ck3 /> ck3<br />
    <input type="checkbox" name="checkbox3" id="checkbox32" value=ck4 /> ck4<br />

<script>
function checkFormData() {
    if (!$('input[name=checkbox2]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
        return false;
    }
    if (!$('input[name=checkbox3]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
        return false;
    }
    alert("Success");
    return true;
}
</script>

Dalla metà del 2019 e jQuery a volte fa un passo indietro per cose come VueJS, React ecc. Ecco un'opzione di ascoltatore onload di vaniglia Javascript puro:

<script>
  // Replace 'admincheckbox' both variable and ID with whatever suits.

  window.onload = function() {
    const admincheckbox = document.getElementById("admincheckbox");
    admincheckbox.addEventListener('click', function() {
      if(admincheckbox.checked){
        alert('Checked');
      } else {
        alert('Unchecked');
      }
    });
  }
</script>

La tua domanda non è chiara: vuoi dare "checkbox array id" in input e ottenere true/falsein output - in questo modo non saprai quale checkbox è stata selezionata (come suggerisce il nome della tua funzione). Quindi sotto c'è la mia proposta di body of your isCheckedByIdche in input prende la casella di controllo ide in output return true/false(è molto semplice ma il tuo ID non dovrebbe essere una parola chiave),

this[id].checked

function isCheckedById(id) {
  return this[id].checked;
}

function check() {
  console.clear()
  console.log('1',isCheckedById("myCheckbox1"));
  console.log('2',isCheckedById("myCheckbox2"));
  console.log('3',isCheckedById("myCheckbox3"));
}

<label><input id="myCheckbox1" type="checkbox">check 1</label>
<label><input id="myCheckbox2" type="checkbox">check 2</label>
<label><input id="myCheckbox3" type="checkbox">check 3</label>
<!-- label around inputs makes text clickable -->
<br>
<button onclick="check()">show checked</button>

usa il codice qui sotto

<script>

$(document).ready(function () {
  $("[id$='chkSendMail']").attr("onchange", "ShowMailSection()");
}

function ShowMailSection() {
  if ($("[id$='chkSendMail'][type='checkbox']:checked").length >0){
      $("[id$='SecEmail']").removeClass("Hide");
  }
</script>