jquery détermine si les compatriotes sont sélectionnés-Questions et réponses frontales-php.cn

Dans le développement quotidien, nous pouvons rencontrer des situations où nous devons déterminer si des éléments frères et sœurs sont sélectionnés. Par exemple, lors de la mise en œuvre de la fonction de sélection unique ou de sélection multiple d'une liste, nous devons effectuer le traitement correspondant basé sur la sélection du même groupe d'éléments.

Dans ce cas, jQuery fournit des méthodes pratiques pour déterminer l'état sélectionné des éléments frères. Ensuite, nous présentons ces méthodes et leurs applications.

1. État sélectionné

Dans jQuery, on peut utiliser la méthode prop() pour obtenir l'état sélectionné d'un élément. Cette méthode renvoie une valeur booléenne indiquant si l'élément est sélectionné. Par exemple : prop()方法获取元素的选中状态。该方法返回一个布尔值，表示元素是否被选中。例如：

var isChecked = $('#checkbox').prop('checked');

Copier après la connexion

上述代码会获取id为checkbox的元素的选中状态，并将结果保存在isChecked变量中。

如果我们想获取一组元素中所有元素的选中状态，可以使用下述代码：

var isCheckedArray = $('.checkbox').map(function () {
  return $(this).prop('checked');
});

Copier après la connexion

上述代码会获取class为checkbox的所有元素的选中状态，并将结果保存在isCheckedArray数组中。

二、判断同胞元素是否选中

有了选中状态的获取方法，我们便可以轻松判断同胞元素是否被选中了。其中，jQuery提供了两个常用的方法：siblings()和next()。

siblings()

siblings()方法用于获取当前元素的所有同胞元素。例如：

var siblings = $('#checkbox').siblings();

Copier après la connexion

上述代码会获取id为checkbox的元素的所有同胞元素，并将结果保存在siblings变量中。如果我们想判断同胞元素是否被选中，可以在siblings()方法后面使用each()方法遍历同胞元素，并依次判断它们的选中状态，如下：

$('#checkbox').siblings().each(function () {
  if ($(this).prop('checked')) {
    // 同胞元素已选中
  } else {
    // 同胞元素未选中
  }
});

Copier après la connexion

上述代码会遍历id为checkbox的元素的所有同胞元素，分别判断它们的选中状态。

next()

next()方法用于获取当前元素的下一个同胞元素。例如：

var nextElement = $('#checkbox').next();

Copier après la connexion

上述代码会获取id为checkbox的元素的下一个同胞元素，并将结果保存在nextElement变量中。如果我们想判断下一个同胞元素是否被选中，可以使用prop()方法获取其选中状态，如下：

if ($('#checkbox').next().prop('checked')) {
  // 下一个同胞元素已选中
} else {
  // 下一个同胞元素未选中
}

Copier après la connexion

上述代码会判断id为checkbox的元素的下一个同胞元素的选中状态。

三、应用场景

那么，在实际开发中，我们可以如何应用上述方法呢？以下是几个常见的应用场景：

实现列表的多选

在列表中，我们经常需要实现多选的功能。例如，在选择商品的页面中，用户可以勾选多个商品进行结算。此时，我们需要判断每个商品是否被选中，以完成对选中商品的处理。

实现这个功能的关键在于获取每个商品前面的复选框元素，并判断它们是否被选中。具体实现代码如下：

<ul>
  <li>
    <input type="checkbox" name="product" value="1">
    商品1
  </li>
  <li>
    <input type="checkbox" name="product" value="2">
    商品2
  </li>
  <li>
    <input type="checkbox" name="product" value="3">
    商品3
  </li>
</ul>

Copier après la connexion

$('input[name="product"]').click(function () {
  var isChecked = $(this).prop('checked');
  var value = $(this).val();

  if (isChecked) {
    // 商品选中
    console.log('商品' + value + '已选中');
  } else {
    // 商品取消选中
    console.log('商品' + value + '已取消选中');
  }
});

Copier après la connexion

上述代码会监听页面中所有name属性为product的复选框元素的点击事件，每次点击时判断复选框的选中状态，并打印相应的信息。

实现排他性单选

在一些场景下，我们需要实现一组元素的排他性单选，即选中一个元素时，其他元素均为未选中状态。例如，在选择支付方式的页面中，用户只能选择一种支付方式。这时，我们可以用下述代码实现排他性单选功能：

<ul>
  <li>
    <label><input type="radio" name="payment" value="alipay"> 支付宝</label>
  </li>
  <li>
    <label><input type="radio" name="payment" value="wechat"> 微信支付</label>
  </li>
  <li>
    <label><input type="radio" name="payment" value="unionpay"> 银联支付</label>
  </li>
</ul>

Copier après la connexion

$('input[name="payment"]').click(function () {
  $('input[name="payment"]').prop('checked', false); // 取消其他选项的选中状态
  $(this).prop('checked', true); // 当前选项设为选中
});

Copier après la connexion

上述代码会监听页面中所有name属性为payment的单选框元素的点击事件，每次点击时取消其他选项的选中状态，并将当前选项设为选中状态。

总结

在jQuery中，我们可以使用prop()方法获取元素的选中状态，使用siblings()方法获取元素的所有同胞元素，使用next()rrreee

Le code ci-dessus obtiendra le statut sélectionné de l'élément avec l'identifiant de checkbox et enregistrera le résultat dans la variable isChecked . #🎜🎜##🎜🎜#Si nous voulons obtenir le statut sélectionné de tous les éléments d'un groupe d'éléments, nous pouvons utiliser le code suivant : #🎜🎜#rrreee#🎜🎜#Le code ci-dessus obtiendra la classe comme checkboxL'état vérifié de tous les éléments et enregistrez les résultats dans le tableau isCheckedArray. #🎜🎜##🎜🎜# 2. Déterminer si les éléments frères et sœurs sont sélectionnés #🎜🎜##🎜🎜# Avec la méthode d'obtention du statut sélectionné, nous pouvons facilement déterminer si les éléments frères et sœurs sont sélectionnés. Parmi elles, jQuery propose deux méthodes couramment utilisées : siblings() et next(). #🎜🎜#

siblings()

#🎜🎜#siblings() est utilisée pour obtenir tous les éléments frères de l'élément actuel. Par exemple : #🎜🎜#rrreee#🎜🎜#Le code ci-dessus obtiendra tous les éléments frères de l'élément avec l'identifiant de checkbox et enregistrera le résultat dans le frères et sœurs variable. Si nous voulons déterminer si les éléments frères sont sélectionnés, nous pouvons utiliser la méthode each() après la méthode siblings() pour parcourir les éléments frères et déterminer leur statut sélectionné dans tour, comme suit : #🎜🎜#rrreee#🎜🎜#Le code ci-dessus traversera tous les éléments frères de l'élément avec l'identifiant de checkbox et déterminera respectivement leur statut sélectionné. #🎜🎜#

next()

#🎜🎜#next() est utilisée pour obtenir le prochain frère du élément élément actuel. Par exemple : #🎜🎜#rrreee#🎜🎜#Le code ci-dessus obtiendra l'élément frère suivant de l'élément avec l'identifiant de checkbox et enregistrera le résultat dans le nextElement variable. Si nous voulons déterminer si l'élément frère suivant est sélectionné, nous pouvons utiliser la méthode prop() pour obtenir son statut sélectionné, comme suit : #🎜🎜#rrreee#🎜🎜#Le code ci-dessus déterminer que l'identifiant est L'état sélectionné de l'élément frère suivant de l'élément checkbox. #🎜🎜##🎜🎜#3. Scénarios d'application#🎜🎜##🎜🎜#Alors, comment pouvons-nous appliquer la méthode ci-dessus dans un développement réel ? Voici plusieurs scénarios d'application courants : #🎜🎜#

Implémentation de plusieurs sélections dans les listes

#🎜🎜#Dans les listes, nous devons souvent implémenter plusieurs sélections. Par exemple, sur la page de sélection de produits, les utilisateurs peuvent vérifier plusieurs produits à régler. À ce stade, nous devons déterminer si chaque produit est sélectionné pour terminer le traitement des produits sélectionnés. #🎜🎜##🎜🎜#La clé pour mettre en œuvre cette fonction est d'obtenir les éléments de case à cocher devant chaque produit et de déterminer s'ils sont sélectionnés. Le code d'implémentation spécifique est le suivant : #🎜🎜#rrreeerrreee#🎜🎜#Le code ci-dessus surveillera les événements de clic de tous les éléments de case à cocher dont l'attribut name est product sur le page, à chaque fois Lorsque vous cliquez dessus, déterminez l'état sélectionné de la case à cocher et imprimez les informations correspondantes. #🎜🎜#

Implémenter une sélection radio exclusive

#🎜🎜#Dans certains scénarios, nous devons implémenter une sélection radio exclusive pour un groupe d'éléments, c'est-à-dire , sélectionnez un élément, les autres éléments sont désélectionnés. Par exemple, sur une page de sélection de mode de paiement, les utilisateurs ne peuvent choisir qu'un seul mode de paiement. À l'heure actuelle, nous pouvons utiliser le code suivant pour implémenter la fonction exclusive de sélection de radio : #🎜🎜#rrreeerrreee#🎜🎜#Le code ci-dessus surveillera tous les attributs name de la page qui sont paiement L'événement click de l'élément bouton radio annule l'état sélectionné des autres options et définit l'option actuelle sur l'état sélectionné à chaque fois que vous cliquez dessus. #🎜🎜##🎜🎜#Summary#🎜🎜##🎜🎜#Dans jQuery, on peut utiliser la méthode prop() pour obtenir l'état sélectionné d'un élément, et utiliser siblings () La méthode code> récupère tous les éléments frères de l'élément, et la méthode <code>next() obtient l'élément frère suivant de l'élément. Ces méthodes peuvent nous aider à déterminer le statut sélectionné des éléments frères et sœurs et à mettre en œuvre diverses fonctions pratiques. #🎜🎜#

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!