it-swarm.com.de

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

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

Ich verwende den folgenden Code, aber er gibt immer die Anzahl der aktivierten Kontrollkästchen zurück, unabhängig von der ID.

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

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

IDs müssen in Ihrem Dokument eindeutig sein, was 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 nach 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;
637
nickf
$('#' + id).is(":checked")

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

Für ein Array von Kontrollkästchen mit demselben Namen können Sie die Liste der markierten Kontrollkästchen erhalten:

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

Dann durchlaufen Sie sie und sehen, was Sie tun können:

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

Um herauszufinden, wie viele geprüft werden, können Sie Folgendes tun:

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

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

259
Prasanna Rotti

Alle folgenden Methoden sind nützlich:

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

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

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

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

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

91
justnajm

jQuery-Code zur Überprüfung, ob das Kontrollkästchen aktiviert ist

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

Alternative:

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

Das wichtigste zu beachtende Konzept bezüglich des geprüften Attributs ist dass es nicht der geprüften Eigenschaft entspricht. Das Attribut entspricht eigentlich der defaultChecked-Eigenschaft und sollte verwendet werden Nur um den Anfangswert des Kontrollkästchens festzulegen. Das geprüfte Attribut Der Wert ändert sich nicht mit dem Status des Kontrollkästchens, während.. geprüfte Eigenschaft macht. Daher ist der Cross-Browser-kompatible Weg zu Stellen Sie fest, ob ein Kontrollkästchen aktiviert ist, um die Eigenschaft zu verwenden

Alle folgenden Methoden sind möglich

elem.checked 

$(elem).prop("checked") 

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

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

Laut jQuery documentation gibt es folgende Möglichkeiten, um zu überprüfen, ob ein Kontrollkästchen aktiviert ist oder nicht. Betrachten wir beispielsweise 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 gecheckt

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

Beispiel 2 - Mit jQuery ist HINWEIS -: markiert

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

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

Funktion prüfen jsfiddle

26
Subodh Ghulaxe

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" />
26
Vishnu Sharma

Sie können jeden der folgenden empfohlenen Codes per Jquery verwenden.

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

Ich weiß, das OP will jquery, aber in meinem Fall war die reine JS die Antwort. Wenn also jemand wie ich hier ist und keine Jquery hat oder nicht verwenden will - hier ist die JS-Antwort:

document.getElementById("myCheck").checked

Sie gibt true zurück, wenn die Eingabe mit der ID myCheck überprüft wird, und false, wenn sie nicht überprüft wird.

So einfach ist das.

10
Combine

Du kannst es einfach gerne machen;

Arbeiten Fiddle

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 die Option checkbox markiert ist, wird true zurückgegeben, andernfalls undefined

10
Aamir Shahzad

Einfache Demo zum Überprüfen und Setzen 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);
    }
});
7
An Illusion

Für ein Kontrollkästchen mit einer ID

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

sie können es einfach tun

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

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

5
Aniket Thakur

Um nur zu sagen, in meinem Beispiel war dies ein Dialogfeld, in dem das Kontrollkästchen vor dem Schließen des Dialogfelds überprüft wurde. Keine der obigen Angaben und Wie kann geprüft werden, ob in jQuery ein Kontrollkästchen aktiviert ist? und jQuery, wenn das Kontrollkästchen aktiviert ist schien auch 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');

Das funktionierte so, dass die Klasse dann die ID genannt wurde. anstatt nur die ID. Möglicherweise liegt dies an den verschachtelten DOM-Elementen auf dieser Seite, die das Problem verursachen. Die Problemumgehung war oben.

5
Vahid

Kontrollkästchen aktivieren/deaktivieren

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

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

Laut jsperf.com sind die DOM-Vorgänge am schnellsten, dann folgt $ ().

Hier sind die Syntaxe: 

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 zu .is() kann der Wert auch eingestellt werden.

4
BlackPanther

Mit diesem Code können Sie aktivieren, dass mindestens ein Kontrollkästchen ausgewählt ist oder nicht in verschiedenen Kontrollkästchengruppen oder aus mehreren Kontrollkästchen angezeigt wird .. Mit diesem Code können Sie keine IDs oder dynamischen IDs entfernen. Dieser Code arbeitet mit den gleichen IDs.

Referenz 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>
0
Parth Patel

Da es Mitte 2019 ist und jQuery manchmal hinter Dinge wie VueJS, React etc. zurücktritt, ist hier eine reine Vanilla 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>
0
Grant