Überprüfen Sie, ob das Kontrollkästchen mit jQuery aktiviert ist

Wie kann ich anhand der ID des Kontrollkästchen-Arrays überprüfen, ob ein Kontrollkästchen in einem Kontrollkästchen-Array aktiviert ist?

Ich verwende den folgenden Code, der jedoch unabhängig von der ID immer die Anzahl der aktivierten Kontrollkästchen zurückgibt.

function isCheckedById(id) {
    alert(id);
    var checked = $("input[@id=" + id + "]:checked").length;
    alert(checked);

    if (checked == 0) {
        return false;
    } else {
        return true;
    }
}

IDs müssen in Ihrem Dokument eindeutig sein. Dies bedeutet, dass Sie dies nicht tun sollten :

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

Löschen Sie stattdessen die ID und wählen Sie sie nach Namen oder einem enthaltenden Element aus:

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

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

Und jetzt die 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")

Das wird angezeigt, wenn das Kontrollkästchen aktiviert ist.

Für eine Reihe von Kontrollkästchen mit demselben Namen können Sie die Liste der aktivierten Kontrollkästchen abrufen, indem Sie:

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

Um sie dann zu durchlaufen und zu sehen, was überprüft wurde, können Sie Folgendes tun:

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

Um herauszufinden, wie viele überprüft wurden, können Sie Folgendes tun:

$boxes.length;

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

Der obige Code gibt true zurück, wenn das Kontrollkästchen aktiviert ist, oder false, wenn nicht.

Alle folgenden Methoden sind nützlich:

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

$('#checkbox').prop('checked')

$('#checkbox')[0].checked

$('#checkbox').get(0).checked

Es wird empfohlen, DOMelement oder Inline "this.checked" zu vermeiden, stattdessen sollte die jQuery on-Methode als Ereignis-Listener verwendet werden.

jQuery-Code, um zu überprüfen, ob das Kontrollkästchen aktiviert ist oder nicht:

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

Alternative:

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

Das wichtigste Konzept für das überprüfte Attribut ist, dass es nicht der überprüften Eigenschaft entspricht. Das Attribut entspricht tatsächlich der Eigenschaft defaultChecked und sollte nur zum Festlegen des Anfangswertes des Kontrollkästchens verwendet werden. Der aktivierte Attributwert ändert sich nicht mit dem Status des Kontrollkästchens, während dies bei der überprüften Eigenschaft der Fall ist. Daher ist die Verwendung der Eigenschaft die browserübergreifende Methode, um festzustellen, ob ein Kontrollkästchen aktiviert ist

Alle folgenden Methoden sind möglich

elem.checked 

$(elem).prop("checked") 

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

Sie können diesen Code verwenden,

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

Gemäß der jQuery- Dokumentation gibt es folgende Möglichkeiten, um zu überprüfen, ob ein Kontrollkästchen aktiviert ist oder nicht. Betrachten wir zum Beispiel ein Kontrollkästchen (Check Working jsfiddle mit allen Beispielen)

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

Beispiel 1 - Mit aktiviert

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

Beispiel 2 - Bei jQuery ist HINWEIS -: aktiviert

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

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

Überprüfen Sie Working jsfiddle

Sie können dies versuchen:

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

Sie können einen der folgenden empfohlenen Codes von jquery verwenden.

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

Ich weiß, dass das OP jquery will, aber in meinem Fall war reines JS die Antwort. Wenn also jemand wie ich hier ist und kein jquery hat oder es nicht verwenden möchte, ist hier die JS-Antwort:

document.getElementById("myCheck").checked

Es gibt true zurück, wenn die Eingabe mit der ID myCheck aktiviert ist, und false, wenn sie nicht aktiviert ist.

So einfach ist das.

Sie können es einfach so machen;

Geige arbeiten

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

oder noch einfacher;

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

Wenn das checkboxaktiviert ist, wird es trueanderweitig zurückgegebenundefined

Dies ist auch eine Idee, die ich häufig benutze:

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

Wenn cheked, gibt es 1 zurück; Andernfalls wird 0 zurückgegeben.

Einfache Demo zum Aktivieren und Einstellen eines Kontrollkästchens.

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

In meinem Beispiel war die Situation ein Dialogfeld, das das Kontrollkästchen vor dem Schließen des Dialogfelds überprüfte. Keine der oben genannten und Wie kann überprüft werden, ob in jQuery ein Kontrollkästchen aktiviert ist? und jQuery, wenn das Kontrollkästchen aktiviert ist, schien ebenfalls nicht zu funktionieren.

Schlussendlich

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

Dies funktionierte so, dass die Klasse und dann die ID aufgerufen wurden. eher als nur die ID. Dies kann an den verschachtelten DOM-Elementen auf dieser Seite liegen, die das Problem verursachen. Die Problemumgehung war oben.

Für Kontrollkästchen mit einer ID

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

Sie können einfach tun

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

Sie erhalten trueoder falseals Rückgabewert für die obige Syntax. Sie können es in der if-Klausel als normalen booleschen Ausdruck verwenden.

So etwas kann helfen

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

Laut jsperf.com sind die DOM-Operationen am schnellsten, dann $ (). Prop () gefolgt von $ (). Is () !!

Hier sind die Syntaxen:

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

Ich persönlich bevorzuge .prop(). Im Gegensatz dazu .is()kann es auch zum Einstellen des Werts verwendet werden.

Aktivieren Sie das Kontrollkästchen

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

Mit diesem Code können Sie überprüfen, ob mindestens ein Kontrollkästchen in verschiedenen Kontrollkästchengruppen oder aus mehreren Kontrollkästchen aktiviert ist oder nicht. Mit dieser Option müssen Sie keine IDs oder dynamischen IDs entfernen. Dieser Code funktioniert mit denselben IDs.

Referenz Verbindung

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

Da es Mitte 2019 ist und jQuery manchmal Dinge wie VueJS, React usw. in den Hintergrund rückt, ist hier eine reine Vanille-Javascript-Onload-Listener-Option:

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

Ihre Frage ist nicht klar: Sie möchten bei der Eingabe "Checkbox Array ID" angeben und true/falsebei der Ausgabe erhalten - auf diese Weise wissen Sie nicht, welches Kontrollkästchen aktiviert wurde (wie Ihr Funktionsname andeutet). Also unten ist mein Vorschlag von Körper von Ihnen, isCheckedByIddie bei Eingabe Checkbox idund bei Ausgabe Rückgabe true/false(es ist sehr einfach, aber Ihre ID sollte kein Schlüsselwort sein),

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>

Verwenden Sie den folgenden 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>