Den Wert eines markierten Kontrollkästchens abrufen?

Question

Ich habe also einen Code, der wie folgt 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 angekreuzten Kästchens zu erhalten.

EDIT : Um etwas hinzuzufügen, muss nur EIN Kästchen angekreuzt werden.

Answer 1

Ich bin überrascht, dass hier keine funktionierenden Vanilla-JavaScript-Lösungen zu sehen sind (die am häufigsten gewählte Antwort funktioniert nicht, wenn man sich an bewährte Verfahren hält und unterschiedliche IDs für jedes HTML-Element verwendet). Wie auch immer, dies tat die Arbeit für mich:

Array.prototype.slice.call(document.querySelectorAll("[name='mailId']:checked"),0).map(function(v,i,a) { 
      return v.value; 
  });

Answer 2

Wenn Sie Folgendes verwenden Semantische UI React , data wird als zweiter Parameter an den Befehl onChange Veranstaltung.

Sie können also auf die checked Eigenschaft wie folgt:

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

Answer 3

Wenn Sie die Werte aller Kontrollkästchen mit jQuery abrufen möchten, könnte Ihnen dies helfen. Damit wird die Liste geparst und je nach gewünschtem Ergebnis können Sie anderen Code ausführen. Übrigens muss man für diesen Zweck die Eingabe nicht mit Klammern [] benennen. Ich habe sie weggelassen.

  $(document).on("change", ".messageCheckbox", function(evnt){
    var data = $(".messageCheckbox");
    data.each(function(){
      console.log(this.defaultValue, this.checked);
      // Do something... 
    });
  }); /* END LISTENER messageCheckbox */

Answer 4

reines Javascript und moderne Browser

// for boolean
document.querySelector(`#isDebugMode`).checked

// checked means specific values
document.querySelector(`#size:checked`)?.value ?? defaultSize

Beispiel

<form>
  <input type="checkbox" id="isDebugMode"><br>
  <input type="checkbox" value="3" id="size"><br>
  <input type="submit">
</form>

<script>
  document.querySelector(`form`).onsubmit = () => {
    const isDebugMode = document.querySelector(`#isDebugMode`).checked
    const defaultSize = "10"
    const size = document.querySelector(`#size:checked`)?.value ?? defaultSize
    //  for defaultSize is undefined or null
    // const size = document.querySelector(`#size:checked`)?.value
    console.log({isDebugMode, size})
    return false
  }
</script>

• Optionale_Ketten (?.)

Answer 5

In meinem Projekt verwende ich normalerweise diese Schnipsel:

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

Und es funktioniert gut.