Controleer of het selectievakje is aangevinkt met jQuery

Hoe kan ik controleren of een selectievakje in een selectievakje-array is aangevinkt met behulp van de id van het selectievakje-array?

Ik gebruik de volgende code, maar deze retourneert altijd het aantal aangevinkte selectievakjes, ongeacht de id.

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

Antwoord 1, autoriteit 100%

ID’s moeten uniek zijn in uw document, wat betekent dat u dit nietmoet doen:

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

Laat in plaats daarvan de ID vallen en selecteer ze vervolgens op naam of op een bevattend element:

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

En nu de 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;

Antwoord 2, autoriteit 99%

$('#' + id).is(":checked")

Dat krijgt als het selectievakje is aangevinkt.

Voor een reeks selectievakjes met dezelfde naam kunt u de lijst met gecontroleerd ontvangen door:

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

Di vervolgens door hen heen en kijk wat u hebt gecontroleerd, kunt u doen:

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

Om te ontdekken hoeveel velen worden gecontroleerd, kunt u doen:

$boxes.length;

3, Autoriteit 45%

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

De bovenstaande code retourneert true als het selectievakje wordt gecontroleerd of onwaar, zo niet.

4, Autoriteit 20%

Alle volgende methoden zijn handig:

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

Het wordt aanbevolen dat duik of inline “this.Checked” moet worden vermeden in plaats daarvan jQuery op methode moet worden gebruikt Evenement Listener.

5, Autoriteit 14%

JQuery-code om te controleren of het selectievakje wordt gecontroleerd of niet:

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

Alternatief:

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

6, Autoriteit 10%

Het belangrijkste concept om te onthouden over het gecontroleerde kenmerk is
dat het niet overeenkomt met de aangevinkte eigenschap. Het attribuut
komt eigenlijk overeen met de eigenschap defaultChecked en moet worden gebruikt
alleen om de beginwaarde van het selectievakje in te stellen. Het aangevinkte attribuut
waarde verandert niet met de status van het selectievakje, terwijl de
gecontroleerde eigenschap doet. Daarom is de cross-browser-compatibele manier om
bepalen of een selectievakje is aangevinkt is om de eigenschap te gebruiken

Alle onderstaande methoden zijn mogelijk

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

Antwoord 7, autoriteit 6%

U kunt deze code gebruiken,

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

Antwoord 8, autoriteit 5%

Dit is ook een idee dat ik vaak gebruik:

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

Indien aangevinkt, wordt 1 geretourneerd; anders geeft het 0 terug.

Antwoord 9, autoriteit 4%

Volgens de jQuery documentatiezijn er de volgende manieren om te controleren of een selectievakje is aangevinkt of niet. Laten we bijvoorbeeld een selectievakje overwegen (controleer Werken jsfiddlemet alle voorbeelden)

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

Voorbeeld 1 – Met aangevinkt

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

Voorbeeld 2 – Met jQuery is, OPMERKING – :aangevinkt

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

Voorbeeld 3 – Met jQuery prop

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

Controleer Werken jsfiddle

Antwoord 10, autoriteit 4%

Je kunt dit proberen:

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

Antwoord 11, autoriteit 4%

Ik weet dat de OP jQuery wil, maar in mijn geval was pure JS het antwoord, dus als iemand zoals ik hier is en geen jQuery heeft of het niet wil gebruiken, hier is het JS-antwoord:

document.getElementById("myCheck").checked

Het geeft true terug als de invoer met ID myCheck is aangevinkt en false als het niet is aangevinkt.

Zo simpel is het.

Antwoord 12, autoriteit 3%

U kunt elk van de volgende aanbevolen codes gebruiken door jQuery.

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

Antwoord 13, autoriteit 2%

Je kunt het gewoon doen als;

Werkende viool

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

of nog eenvoudiger;

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

Als het checkboxis aangevinkt, wordt truegeretourneerd, anders undefined

Antwoord 14

Eenvoudige demo voor het controleren en instellen van een selectievakje.

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

Antwoord 15

Om maar te zeggen dat in mijn voorbeeld de situatie een dialoogvenster was dat vervolgens het selectievakje verifieerde voordat het dialoogvenster werd gesloten. Geen van bovenstaande en Hoe controleer ik of een selectievakje is aangevinkt in jQuery?en jQuery als het selectievakje is aangevinktbleek ook niet te werken.

Uiteindelijk

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

Dit werkte, dus riep de klas en vervolgens de ID. in plaats van alleen de ID. Het kan zijn dat de geneste DOM-elementen op deze pagina het probleem veroorzaken. De tijdelijke oplossing was hierboven.

Antwoord 16

Voor selectievakje met een id

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

dat kan je gewoon doen

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

U krijgt trueof falseAS RETOURSUITWAARDE VOOR BOVENSELIJKE SYNTAX. U kunt het gebruiken als clausule als normale Booleaanse uitdrukking.

17

zoiets kan

helpen

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

18

Eigenlijk, volgens jspperf.com , de DOM-operaties zijn het snelst, dan $ () .PROP () Gevolgd door $ (). is () !!

Hier zijn de syntaxis:

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

I Persoonlijk geef de voorkeur .prop(). In tegenstelling tot .is()kan het ook worden gebruikt om de waarde in te stellen.

19

Toggle checkbox aangevinkt

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

Antwoord 20

$(document).on('click','#checkBoxId',function(){
  var isChecked = $(this).is(':checked');
  console.log(isChecked);
});

Deze code hierboven werkt ook op bootstrap modal. isChecked is waar of flase ;

Antwoord 21

Met deze code kunt u aanvinken dat minimaal één selectievakje is geselecteerd of niet in verschillende selectievakjes of uit meerdere selectievakjes.
Hiermee kunt u niet eisen dat u ID’s of dynamische ID’s verwijdert. Deze code werkt met dezelfde ID’s.

Referentie Link

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

22

Omdat het medio 2019 is en jQuery soms een achterbank neemt naar dingen zoals Vuejs, reageren enz. Hier is een pure vanille javascript onload luisterer optie:

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

23

Gebruik de onderstaande code

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