jQuery :checked セレクタ

jQuery :checked 選択器 - 精准に選択されたフォーム要素を取得する

jQuery の :checked 選択器をマスターして、チェックボックス (checkbox) やラジオボタン (radio button) などのフォーム要素から選択された項目を簡単に取得しましょう。 この記事では、:checked 選択器の使い方、注意点、実際の使用例を詳しく解説し、フロントエンド開発の効率向上を支援します。

一、:checked 選択器の基本

  • 機能: :checked 選択器は、フォーム内で選択されているすべてのラジオボタンとチェックボックスを選択します。
  • 構文: $(":checked")
  • 戻り値: 一致するすべての選択済み要素を含む jQuery オブジェクト

二、:checked 選択器の適用例

1. 選択値の取得:

  • :checked 選択器を使用して、選択されているチェックボックスまたはラジオボタンの値を取得します。
  • サンプルコード: 
    
// 選択されているラジオボタンの値を取得する
var selectedValue = $(":radio[name='gender']:checked").val(); 

// 選択されているすべてのチェックボックスの値を取得する
var selectedValues = [];
$(":checkbox[name='hobby']:checked").each(function() {
    selectedValues.push($(this).val());
});

2. 選択状態の操作:

  • 条件に応じて、チェックボックスやラジオボタンを動的に選択または選択解除します。
  • サンプルコード: 
    
// ID が "agree" のチェックボックスを選択する
$("#agree").prop("checked", true);

// name が "option" のすべてのラジオボタンの選択を解除する
$("input[name='option']").prop("checked", false);

3. フォーム検証:

  • :checked 選択器と組み合わせて、ユーザーが必要なオプションを選択したかどうかを判断します。
  • サンプルコード: 
    
if ($("input[name='terms']:checked").length === 0) {
    alert("利用規約を読み、同意してください");
    return false; 
}

三、注意点

  • :checked 選択器は、input 要素タイプのラジオボタンとチェックボックスに対してのみ有効です。
  • $(this).val() を使用して選択値を取得する場合は、ラジオボタンとチェックボックスの違いに注意してください。
  • 要素の選択状態を設定するには、attr("checked", "checked") ではなく、prop("checked", true/false) メソッドを使用することをお勧めします。

四、まとめ

jQuery :checked 選択器は、フォーム要素を操作するための便利なツールです。 その使い方を習得することで、開発効率を大幅に向上させることができます。

jQuery :checked 選択器に関するQ&A

  1. Q: :checked 選択器はどのような要素に対して有効ですか？
    A: :checked 選択器は、<input type="checkbox"> と <input type="radio"> の要素に対してのみ有効です。他の種類の要素には使用できません。
  2. Q: :checked 選択器を使用して、選択されているチェックボックスの値を取得するにはどうすればよいですか？
    A: $(":checkbox[name='checkboxName']:checked").val() を使用します。ここで、checkboxName はチェックボックスの name 属性の値に置き換えてください。
  3. Q: :checked 選択器を使用して、ページ上のすべての選択済み要素を選択できますか？
    A: はい、$(":checked") を使用すると、ページ上のすべての選択済み要素 (チェックボックス、ラジオボタンなど) を選択できます。