Den Wert des aktivierten Kontrollkästchens abrufen?

Ich habe also Code, der so aussieht:

<input class="messageCheckbox" type="checkbox" value="3" name="mailId[]">
<input class="messageCheckbox" type="checkbox" value="1" name="mailId[]">

Ich brauche nur Javascript, um den Wert des aktuell aktivierten Kontrollkästchens zu ermitteln.

BEARBEITEN : Zum Hinzufügen gibt es nur EIN Kontrollkästchen.

Für moderne Browser :

var checkedValue = document.querySelector('.messageCheckbox:checked').value;

MitjQuery :

var checkedValue = $('.messageCheckbox:checked').val();

Reines Javascript ohnejQuery :

var checkedValue = null; 
var inputElements = document.getElementsByClassName('messageCheckbox');
for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValue = inputElements[i].value;
           break;
      }
}

Keiner der oben genannten Punkte hat bei mir funktioniert, aber verwenden Sie einfach Folgendes:

document.querySelector('.messageCheckbox').checked;

Viel Spaß beim Codieren.

Ich verwende dies in meinem Code. Versuchen Sie dies

var x=$("#checkbox").is(":checked");

Wenn das Kontrollkästchen aktiviert ist, xist es wahr, andernfalls ist es falsch.

in einfachem Javascript:

function test() {
    var cboxes = document.getElementsByName('mailId[]');
    var len = cboxes.length;
    for (var i=0; i<len; i++) {
        alert(i + (cboxes[i].checked?' checked ':' unchecked ') + cboxes[i].value);
    }
}

function selectOnlyOne(current_clicked) {
    var cboxes = document.getElementsByName('mailId[]');
    var len = cboxes.length;
    for (var i=0; i<len; i++) {
        cboxes[i].checked = (cboxes[i] == current);
    }
}

Dies beantwortet die Frage nicht direkt, kann aber zukünftigen Besuchern helfen.

Wenn eine Variable immer der aktuelle Status des Kontrollkästchens sein soll (anstatt den Status ständig überprüfen zu müssen), können Sie das onchangeEreignis ändern , um diese Variable festzulegen.

Dies kann im HTML erfolgen:

<input class='messageCheckbox' type='checkbox' onchange='some_var=this.checked;'>

oder mit JavaScript:

cb = document.getElementsByClassName('messageCheckbox')[0]
cb.addEventListener('change', function(){some_var = this.checked})

Benutze das:

alert($(".messageCheckbox").is(":checked").val())

Dies setzt voraus, dass die zu überprüfenden Kontrollkästchen die Klasse "messageCheckbox" haben. Andernfalls müssten Sie überprüfen, ob die Eingabe vom Typ Kontrollkästchen ist usw.

<input class="messageCheckbox" type="checkbox" onchange="getValue(this.value)" value="3" name="mailId[]">

<input class="messageCheckbox" type="checkbox" onchange="getValue(this.value)" value="1" name="mailId[]">

function getValue(value){
    alert(value);
}

Wenn Sie Semantic UI React verwenden , datawird es als zweiter Parameter an das onChangeEreignis übergeben.

Sie können daher checkedwie folgt auf die Immobilie zugreifen :

<Checkbox label="Conference" onChange={(e, d) => console.log(d.checked)} />

Keines der oben genannten Verfahren hat bei mir funktioniert, ohne Fehler in die Konsole zu werfen, wenn das Kontrollkästchen nicht aktiviert war. Daher habe ich stattdessen etwas in diese Richtung getan (onclick und die Checkbox-Funktion werden nur für Demozwecke verwendet, in meinem Anwendungsfall ist es Teil von a viel größere Formularübermittlungsfunktion):

function checkbox() {
  var checked = false;
  if (document.querySelector('#opt1:checked')) {
     checked = true;
  }
  document.getElementById('msg').innerText = checked;
}

<input type="checkbox" onclick="checkbox()" id="opt1"> <span id="msg">Click The Box</span>

In meinem Projekt verwende ich normalerweise folgende Schnipsel:

var type[];
$("input[name='messageCheckbox']:checked").each(function (i) {
                type[i] = $(this).val();
            });

Und es funktioniert gut. Mit bestem Gruß.