jqueryは同胞が選択されているかどうかを判断します

日々の開発では、兄弟要素が選択されているかどうかを判断する必要がある状況に遭遇することがあります。たとえば、リストの単一選択または複数選択機能を実装する場合、同じ要素グループの選択に基づいて対応する処理を行う必要があります。

この場合、jQuery は兄弟要素の選択状態を判断するための便利なメソッドをいくつか提供します。次に、これらの方法とその応用例を紹介します。

1. 選択状態

jQuery では、prop() メソッドを使用して要素の選択状態を取得できます。このメソッドは、要素が選択されているかどうかを示すブール値を返します。例:

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

上記のコードは、ID checkbox を持つ要素の選択状態を取得し、結果を isChecked 変数に保存します。

要素のグループ内のすべての要素の選択状態を取得したい場合は、次のコードを使用できます:

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

上記のコードは、クラスを持つすべての要素の選択状態を取得します。 checkbox 状態をチェックし、結果を isCheckedArray 配列に保存します。

2. 兄弟要素が選択されているかどうかの判定

選択状態を取得する方法を使えば、兄弟要素が選択されているかどうかを簡単に判定することができます。その中で、jQuery はよく使用される 2 つのメソッド、siblings() と next() を提供します。

1. siblings()

siblings() メソッドは、現在の要素のすべての兄弟要素を取得するために使用されます。例:

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

上記のコードは、ID checkbox を持つ要素のすべての兄弟要素を取得し、結果を siblings 変数に保存します。兄弟要素が選択されているかどうかを確認したい場合は、 siblings() メソッドの後に each() メソッドを使用して兄弟要素を走査し、その選択状態を順番に判断します。

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

上記のコードは、ID checkbox を持つ要素の兄弟要素をすべて走査し、それぞれの選択ステータスを判断します。

2. next()

next() メソッドは、現在の要素の次の兄弟要素を取得するために使用されます。例:

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

上記のコードは、ID checkbox を持つ要素の次の兄弟要素を取得し、結果を nextElement 変数に保存します。次の兄弟要素が選択されているかどうかを確認したい場合は、次のように prop() メソッドを使用してその選択状態を取得できます。

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

上記のコードは、 id は checkbox## です # 要素の次の兄弟要素の選択状態。

3. 適用シナリオ

では、上記の方法を実際の開発にどのように適用できるでしょうか?以下に、いくつかの一般的なアプリケーション シナリオを示します。

リストでの複数選択の実装

リストでは、多くの場合、複数選択の機能を実装する必要があります。例えば、商品選択ページでは、決済対象となる複数の商品を確認することができます。この時点で、選択された製品の処理を完了するために各製品が選択されているかどうかを判断する必要があります。

この関数を実装するための鍵は、各商品の前にあるチェックボックス要素を取得し、それらが選択されているかどうかを判断することです。具体的な実装コードは次のとおりです。

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

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

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

上記のコードは、ページ上の

name 属性が product であるすべてのチェックボックス要素のクリック イベントを監視します。クリックされるたびに応答時間を決定します。マーキーの選択状態を確認し、対応する情報を出力します。

排他的ラジオ選択の実装

一部のシナリオでは、要素のグループに対して排他的ラジオ選択を実装する必要があります。つまり、1 つの要素が選択されると、他の要素も選択されます。選択されていない状態です。たとえば、支払い方法選択ページでは、ユーザーは支払い方法を 1 つだけ選択できます。現時点では、次のコードを使用して、排他的なラジオ選択機能を実装できます。

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

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

上記のコードは、# の

name 属性を持つページ内のすべてのラジオ ボタン要素を監視します。 ##payment イベントをクリックし、クリックするたびに他のオプションのチェックを外し、現在のオプションを選択状態に設定します。 概要

jQuery では、

prop()

メソッドを使用して要素の選択状態を取得し、siblings()要素の次の兄弟要素を取得するには、すべての兄弟要素について、next() メソッドを使用します。これらのメソッドは、兄弟要素の選択されたステータスを決定し、さまざまな実用的な機能を実装するのに役立ちます。

以上がjqueryは同胞が選択されているかどうかを判断しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。