Comment obtenir la valeur de la boîte à sélection multiple dans jquery (une brève analyse de la méthode)

En développement front-end, il est souvent nécessaire d'obtenir la valeur d'une case à cocher pour le traitement ou de déterminer si elle est sélectionnée. jQuery est une bibliothèque JavaScript très populaire qui fournit une API riche qui nous permet d'obtenir facilement la valeur d'une boîte à sélection multiple. Cet article explique comment utiliser jQuery pour obtenir des boîtes à sélection multiple.

1. L'état de la case à sélection multiple sélectionnée

Avant d'obtenir la valeur de la case à sélection multiple, nous devons d'abord comprendre l'état de la case à sélection multiple, c'est-à-dire cochée ou décochée. Nous pouvons utiliser la méthode .prop() pour obtenir ou définir l'état sélectionné de la boîte à sélection multiple. Voici un exemple :

<input type="checkbox" id="checkbox1" value="value1" checked>
<label for="checkbox1">选项1</label>

// 获取checkbox1的选中状态
const isChecked = $('#checkbox1').prop('checked');
console.log(isChecked); // 输出true

Le résultat de l'exemple ci-dessus est vrai, indiquant que la zone de sélection multiple a été sélectionnée. Si l'attribut coché de la boîte à sélection multiple est remplacé par non coché, le résultat de sortie sera faux.

2. Obtenez la valeur de la boîte à sélection multiple

Lorsque nous avons besoin d'obtenir la valeur de la boîte à sélection multiple, nous pouvons utiliser les méthodes suivantes :

1 Utilisez la méthode .each() pour parcourir le boîte à sélection multiple

Nous pouvons utiliser jQuery. La méthode each() parcourt toutes les boîtes à sélection multiple sélectionnées, obtient leurs attributs de valeur, puis stocke ces valeurs dans un tableau. Voici un exemple :

<input type="checkbox" id="option1" value="value1" checked>
<label for="option1">选项1</label>

<input type="checkbox" id="option2" value="value2" checked>
<label for="option2">选项2</label>

<input type="checkbox" id="option3" value="value3">
<label for="option3">选项3</label>

// 获取所有选中的多选框的值，并存储到数组中
const selectedOptions = [];
$('input[type=checkbox]:checked').each(function() {
  selectedOptions.push($(this).val());
});
console.log(selectedOptions); // 输出["value1", "value2"]

Le code ci-dessus utilise un sélecteur pour sélectionner toutes les cases à cocher sélectionnées. Utilisez la méthode .each() pour parcourir chaque zone à sélection multiple sélectionnée et ajouter l'attribut value de ces zones à sélection multiple au tableau.

2. Utilisez la méthode .serializeArray() pour obtenir la valeur de la zone de sélection multiple sélectionnée

En plus d'utiliser la méthode .each(), nous pouvons également utiliser la méthode .serializeArray() de jQuery pour obtenir la valeur de la boîte de sélection multiple sélectionnée. Cette méthode renverra un tableau contenant les valeurs de toutes les cases sélectionnées. Voici un exemple :

<input type="checkbox" id="choice-1" name="choice" value="1" checked>
<label for="choice-1">选项1</label>

<input type="checkbox" id="choice-2" name="choice" value="2" checked>
<label for="choice-2">选项2</label>

<input type="checkbox" id="choice-3" name="choice" value="3">
<label for="choice-3">选项3</label>

// 获取选中的多选框的值
const selectedValues = $('input[name="choice"]:checked').serializeArray();
console.log(selectedValues); // 输出[{name: "choice", value: "1"}, {name: "choice", value: "2"}]

Le code ci-dessus utilise un sélecteur pour sélectionner toutes les cases à cocher sélectionnées. Ici, nous utilisons l'attribut .name pour sélectionner la zone de sélection multiple et la méthode .serializeArray() pour obtenir la valeur de la zone de sélection multiple sélectionnée.

3. Conclusion

Grâce à l'introduction ci-dessus, nous pouvons savoir comment utiliser jQuery pour obtenir la valeur de la boîte à sélection multiple. Que vous utilisiez la méthode .each() ou la méthode .serializeArray(), vous pouvez bien gérer la valeur de la zone de sélection multiple. Mais lorsque vous l'utilisez, vous devez faire un choix en fonction de la situation réelle afin de mieux mettre en œuvre votre propre logique métier.

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!