jquery obtient dynamiquement la valeur indiquant si la case à cocher est sélectionnée-Questions et réponses frontales-php.cn

jquery obtient dynamiquement la valeur indiquant si la case à cocher est sélectionnée

WBOY

Libérer： 2023-05-23 14:24:10

original

1774 Les gens l'ont consulté

En développement web, il est souvent nécessaire d'obtenir le statut coché d'une case à cocher. L'utilisation de jQuery peut simplifier ce processus.

jQuery est une bibliothèque JavaScript rapide, petite et riche en fonctionnalités. Il fournit une API JavaScript pratique et simplifiée pour la traversée et la manipulation de documents HTML, la gestion des événements, l'animation, Ajax et d'autres opérations. La philosophie de conception de jQuery est « Écrivez moins, faites plus ». Elle peut aider les développeurs à utiliser du code simple pour implémenter des fonctions complexes. Dans le développement front-end, jQuery est devenu un outil incontournable.

Lorsque vous utilisez jQuery pour obtenir l'état sélectionné d'une case à cocher, vous devez utiliser le sélecteur de jQuery pour sélectionner l'élément à exploiter, puis obtenir l'état sélectionné via les méthodes fournies par jQuery.

Voici un exemple simple :

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

Copier après la connexion

Dans l'exemple ci-dessus, il y a trois cases à cocher et un bouton. Lorsque vous cliquez sur le bouton, le code obtient la valeur de la case sélectionnée et l'imprime sur la console.

Les méthodes impliquées dans le code sont :

$('#submitBtn').on('click', function() {. .}) : Fonction exécutée lorsque le bouton est cliqué. $('#submitBtn').on('click', function() {...})：在按钮被点击时执行的函数。
$('input[name="option"]:checked')：选择所有name为“option”，且被选中的复选框。
.map(function() {...})：通过函数返回值，对选中的复选框的值进行映射。
.get()

$('input[name="option"]:checked')

.map(function() {...}) : Mappez la valeur de la case à cocher sélectionnée via la valeur de retour de la fonction.

.get() : Convertissez la valeur mappée en un type de tableau.

Grâce à ces méthodes, vous pouvez facilement obtenir le statut coché de la case à cocher.

Bien sûr, il existe d'autres moyens d'obtenir le statut coché de la case à cocher. Par exemple, vous pouvez utiliser la méthode native JavaScript :

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

Copier après la connexion

En utilisant cette méthode, vous devez parcourir manuellement toutes les cases à cocher, déterminer si elles sont sélectionnées et enregistrer les valeurs sélectionnéesdans un tableau. #🎜🎜##🎜🎜#En général, jQuery fournit un moyen simple et pratique d'obtenir l'état coché d'une case à cocher. Dans le même temps, vous pouvez également facilement implémenter d'autres opérations DOM à l'aide de jQuery, telles que l'ajout, la suppression, la modification et la vérification. #🎜🎜##🎜🎜#De plus, il convient de noter que lorsque vous utilisez jQuery, vous devez faire attention aux performances du code. S'il y a trop d'éléments sur la page, cela peut affecter la vitesse de chargement de la page et l'expérience utilisateur. Par conséquent, le code doit être rationalisé autant que possible pour éviter les calculs répétés et les opérations inutiles. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!