Comment définir la valeur sélectionnée de la sélection multiple à l'aide de JQuery

La fonction de sélection multiple dans JQuery est très courante et la définition de la valeur sélectionnée fait également partie de l'opération de sélection multiple JQuery. L'utilisation de JQuery pour définir la valeur sélectionnée peut rapidement mettre en œuvre des opérations, améliorer le confort de l'utilisateur et répondre à diverses exigences fonctionnelles complexes.

Cet article expliquera comment utiliser JQuery pour définir la valeur sélectionnée de la multi-sélection et utilisera des exemples pour faciliter la compréhension.

1. Opérations de base de la multi-sélection JQuery

Avant de commencer à introduire la définition de la valeur sélectionnée, vous devez comprendre les opérations de base de la multi-sélection JQuery.

1. Obtenir la valeur sélectionnée

Obtenir la valeur sélectionnée de la boîte à sélection multiple dans JQuery est très simple et peut être rapidement réalisé en utilisant simplement la méthode val(). Par exemple :

var selectVal = $('input[type=checkbox]:checked').val();

Le code ci-dessus sélectionnera l'option sélectionnée de type case à cocher, puis obtiendra la valeur sélectionnée et l'enregistrera dans la variable selectVal.

2. Définir l'état sélectionné

Lorsque vous devez définir l'état sélectionné de plusieurs options, utilisez simplement la méthode prop() ou attr(). Par exemple :

$('input[type=checkbox]').attr('checked', true);

La ligne de code ci-dessus définira toutes les options de type case à cocher sur sélectionnée.

3. Obtenez le numéro sélectionné

Obtenir le numéro sélectionné est également très simple, utilisez simplement la longueur du tableau d'éléments sélectionné, par exemple :

var count = $('input[type=checkbox]:checked').length;

2. Comment définir la valeur sélectionnée

Après avoir compris le multi de base -Opération de sélection, Ensuite, nous présenterons comment définir la valeur sélectionnée de plusieurs options.

1. Définir la valeur sélectionnée de plusieurs sélections

Pour définir la valeur sélectionnée de plusieurs sélections, vous devez d'abord déterminer le contenu et la valeur de l'option de l'élément sélectionné. Par exemple :

<input type="checkbox" name="color" value="red">红色
<input type="checkbox" name="color" value="yellow">黄色
<input type="checkbox" name="color" value="blue">蓝色

Dans le code ci-dessus, les options dont l'attribut de nom est color sont plusieurs options, et la valeur correspondante de chaque élément est respectivement rouge, jaune et bleu.

Il est également très simple de définir le statut vérifié d'une option via JQuery. Il vous suffit de définir l'attribut vérifié de l'option correspondante sur true. Par exemple :

$('input[name=color][value=red]').prop('checked', true);

Le code ci-dessus définira l'option dont l'attribut de nom est la couleur et la valeur est rouge sur l'état sélectionné.

2. Obtenez la valeur sélectionnée de plusieurs sélections

Pour obtenir la valeur sélectionnée de plusieurs sélections, vous devez filtrer les options sélectionnées dans l'ensemble du groupe multi-sélection, utiliser les valeurs de ces options comme résultat , et ajoutez-les à un tableau . Par exemple :

var selected = [];
$('input[name=color]:checked').each(function() {
  selected.push($(this).val());
});

Le code ci-dessus parcourra les options sélectionnées dont l'attribut de nom est la couleur et ajoutera la valeur de chaque option au tableau sélectionné.

3. Cas pratique

Le scénario le plus courant d'utilisation de JQuery pour définir la valeur sélectionnée de plusieurs options est l'opération de formulaire. Ce qui suit est un cas pratique afin que chacun puisse mieux appliquer les connaissances acquises.

1. Code HTML

<form>
  <label><input type="checkbox" name="hobby" value="swim">游泳</label>
  <label><input type="checkbox" name="hobby" value="run">跑步</label>
  <label><input type="checkbox" name="hobby" value="basketball">篮球</label>
  <label><input type="checkbox" name="hobby" value="football">足球</label>
  <label><input type="checkbox" name="hobby" value="tennis">网球</label>
  <label><input type="checkbox" name="hobby" value="badminton">羽毛球</label>
</form>

2. Définissez la valeur sélectionnée et obtenez la valeur sélectionnée

// 设置选中值
$("form input[name=hobby][value=run]").prop("checked", true);
$("form input[name=hobby][value=football]").prop("checked", true);

// 获取选中值
var hobbyArr = [];
$("form input[name=hobby]:checked").each(function(){
  hobbyArr.push($(this).val());
});
console.log(hobbyArr); // ["run", "football"]

Le code ci-dessus définit respectivement l'attribut de nom, la valeur à courir et les options de football, et enregistre toutes les valeurs sélectionnées dans la sortie. un tableau.

4. Résumé

Ce qui précède est une introduction à la définition de la valeur sélectionnée des options à sélection multiple dans JQuery. Grâce aux exemples de cet article, les lecteurs peuvent mieux comprendre les opérations de base de la multi-sélection JQuery et comment définir la valeur sélectionnée de plusieurs options. En tant qu'excellent framework JavaScript, les opérations puissantes et la syntaxe pratique de JQuery rendent le développement Web plus efficace.

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!