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.

Mit diesen Methoden können Sie ganz einfach den aktivierten Status des Kontrollkästchens abrufen.

Natürlich gibt es auch andere Möglichkeiten, den aktivierten Status der Checkbox zu erhalten. Sie können beispielsweise die native JavaScript-Methode verwenden:

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

Mit dieser Methode müssen Sie alle Kontrollkästchen manuell durchlaufen, feststellen, ob sie ausgewählt sind, und die ausgewählten Werte in einem speichern Array. #🎜🎜##🎜🎜#Im Allgemeinen bietet jQuery eine einfache und bequeme Möglichkeit, den aktivierten Status eines Kontrollkästchens abzurufen. Gleichzeitig können Sie mit jQuery auch problemlos andere DOM-Operationen implementieren, z. B. Hinzufügen, Löschen, Ändern und Überprüfen. #🎜🎜##🎜🎜#Außerdem ist zu beachten, dass bei der Verwendung von jQuery auf die Leistung des Codes geachtet werden muss. Wenn die Seite zu viele Elemente enthält, kann dies die Ladegeschwindigkeit und das Benutzererlebnis der Seite beeinträchtigen. Daher sollte der Code so weit wie möglich optimiert werden, um wiederholte Berechnungen und bedeutungslose Vorgänge zu vermeiden. #🎜🎜#

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!