jquery ruft dynamisch den Wert ab, ob das Kontrollkästchen aktiviert ist

In der Webentwicklung ist es oft notwendig, den aktivierten Status einer Checkbox zu erhalten. Die Verwendung von jQuery kann diesen Prozess vereinfachen.

jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek. Es bietet eine praktische und vereinfachte JavaScript-API für die Durchquerung und Bearbeitung von HTML-Dokumenten, die Ereignisbehandlung, Animation, Ajax und andere Vorgänge. Die Designphilosophie von jQuery lautet „Weniger schreiben, mehr tun“. Sie kann Entwicklern helfen, einfachen Code zur Implementierung komplexer Funktionen zu verwenden. In der Frontend-Entwicklung ist jQuery zu einem unverzichtbaren Werkzeug geworden.

Wenn Sie jQuery verwenden, um den ausgewählten Status eines Kontrollkästchens abzurufen, müssen Sie den Selektor von jQuery verwenden, um das zu bedienende Element auszuwählen, und dann den ausgewählten Status über die von jQuery bereitgestellten Methoden abrufen.

Hier ist ein einfaches Beispiel:

<input type="checkbox" id="checkbox1" name="option1" value="1">选项1
<input type="checkbox" id="checkbox2" name="option2" value="2">选项2
<input type="checkbox" id="checkbox3" name="option3" value="3">选项3
<button id="submitBtn">提交</button>

<script>
$(function() {
  $('#submitBtn').on('click', function() {
    var checkedVals = $('input[name="option"]:checked').map(function() {
      return this.value;
    }).get();
    console.log('选中的值为：' + checkedVals.join(', '));
  });
});
</script>

Im obigen Beispiel gibt es drei Kontrollkästchen und eine Schaltfläche. Wenn auf die Schaltfläche geklickt wird, ruft der Code den Wert des ausgewählten Kontrollkästchens ab und gibt ihn auf der Konsole aus.

Die am Code beteiligten Methoden sind:

• $('#submitBtn').on('click', function() {. . .}): Funktion wird ausgeführt, wenn auf die Schaltfläche geklickt wird. $('#submitBtn').on('click', function() {...})：在按钮被点击时执行的函数。
• $('input[name="option"]:checked')：选择所有name为“option”，且被选中的复选框。
• .map(function() {...})：通过函数返回值，对选中的复选框的值进行映射。
• .get()
$('input[name="option"]:checked'): Markieren Sie alle Kontrollkästchen, deren Name „option“ lautet und ausgewählt sind.

.map(function() {...}): Ordnen Sie den Wert des ausgewählten Kontrollkästchens dem Rückgabewert der Funktion zu.

.get(): Konvertieren Sie den zugeordneten Wert in einen Array-Typ.

var checkboxes = document.querySelectorAll('input[name="option"]');
var checkedVals = [];

for (var i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    checkedVals.push(checkboxes[i].value);
  }
}

console.log('选中的值为：' + checkedVals.join(', '));

Das obige ist der detaillierte Inhalt vonjquery ruft dynamisch den Wert ab, ob das Kontrollkästchen aktiviert ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!