jquery selectがチェックされていない

jQuery は、JS で最も人気のあるツールの 1 つであり、Web ページ内の DOM 要素の処理を容易にする、シンプルで使いやすいメソッドを多数提供します。フォームを処理するとき、多くの場合、フォーム要素で選択したラジオ要素とチェックボックス要素を選択する必要があります。しかし、フォーム内でチェック属性のない要素を選択するにはどうすればよいでしょうか?

まず、フォーム要素のステータスを理解する必要があります。ラジオボタンとチェックボックスの場合、チェックされた状態になります。このステータスは true または false で、チェックされている場合は true、そうでない場合は false です。 DOM では、checked 属性を通じてアクセスできます。

ラジオ ボタンの場合、1 つだけが選択されます。次の HTML コードは、2 つのラジオ ボタンで構成されるフォーム要素です:

<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女

checked 属性にアクセスすると、選択されたラジオ ボタン要素を見つけることができます:

var selectedRadio = $('input[name="gender"]:checked');

チェック ボックスの場合、それらは存在する可能性があります。は複数選択です。次の HTML コードは、2 つのチェック ボックスで構成されるフォーム要素です:

<input type="checkbox" name="interest" value="music" checked>音乐
<input type="checkbox" name="interest" value="sports">运动

selected 属性にアクセスすると、選択されたチェック ボックス要素を見つけることができます:

var selectedCheckbox = $('input[name="interest"]:checked');

ただし、checked 属性がない場合は、 、 私たちは何をすべきか？

方法 1: セレクターの :has() 擬似クラスを使用する

jQuery セレクターの :has() 擬似クラスを使用できます。これにより、特定の親要素を選択できます。子要素。チェックされた属性を持たないラジオ ボタンとチェックボックスの場合、:not() 疑似クラスを使用してフィルタリングし、その後、:has() 疑似クラスを使用して親要素を選択できます。

たとえば、次の HTML コードがあります:

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

次のコードを使用して、チェックされていないラジオ ボタンの親要素を選択できます:

var unselectedRadioParent = $('input[name="gender"]:not(:checked)').parent();

同様に、チェック ボックス要素についても、同様のメソッドを使用できます。

var unselectedCheckboxParent = $('input[name="interest"]:not(:checked)').parent();

:not() 疑似クラス セレクターは、よりパフォーマンスを重視することに注意してください。したがって、フォーム内に多数のラジオ ボタンまたはチェックボックス要素がある場合は、2 番目の方法を使用することをお勧めします。

方法 2: filter() メソッドを使用する

filter() メソッドは、指定されたセレクターまたは関数に一致する要素のコレクションをフィルター処理するために使用されます。 filter() メソッドを使用して、選択したラジオ ボタンまたはチェックボックスの要素をすべて除外し、not() メソッドを使用して他の要素を除外できます。

たとえば、次のラジオ ボタン グループの場合、次のコードを使用して、チェックされていないラジオ ボタン要素を選択できます:

var unselectedRadio = $('input[name="gender"]').not(':checked');

同様に、次のチェックボックス グループの場合、次のコードを使用できます。コードは、チェックされていないチェックボックス要素を選択します:

var unselectedCheckbox = $('input[name="interest"]').not(':checked');

要約

フォーム要素では、選択したラジオ ボタンとチェックボックス要素を選択する必要があることがよくあります。 form 要素に selected 属性がない場合は、セレクターの :has() 疑似クラスまたは filter() メソッドを使用して、チェックされていないラジオ ボタンおよびチェックボックス要素を選択できます。これらの方法により、フォームを処理する際により柔軟な選択肢が提供され、さまざまな状況でフォームを簡単に処理できるようになります。

以上がjquery selectがチェックされていないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。