JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

jQueryで選択したチェックボックスの値を取得する方法

はい、jQueryを使用すれば、選択されたチェックボックスの値を取得することができます。input要素の概念と、:checkedセレクターを組み合わせて利用します。

実装のポイント

チェックボックスの値を取得するには、以下の手順が基本となります。

1. name属性などを使って対象のチェックボックスを絞り込む
2. :checkedセレクターで「チェックが入っている」要素だけを選択する
3. .each()メソッドで各選択項目をループ処理し、値を取り出す

コード例

以下に具体的なサンプルコードを示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
    <input type="checkbox" name="checkDemo" id="check1" value="Cricket" />
    <label for="check1">Cricket</label>
    <input type="checkbox" name="checkDemo" id="check2" value="Listening Music" />
    <label for="check2">Listening Music</label>
    <input type="checkbox" name="checkDemo" id="check3" value="Reading NewsPaper" />
    <label for="check3">Reading NewsPaper</label>
<br>
<button type="button">Click Me</button>
<script>
    $(document).ready(function () {
        $("button").click(function () {
            $('input[name="checkDemo"]:checked').each(function () {
                console.log(this.value);
            });
        });
    });
</script>
</html>

プログラムの実行方法

上記のコードを実行するには、ファイル名を任意の名前(anyName.html や index.html など)で保存してください。その後、VS Codeエディターで該当ファイルを右クリックし、「Open with Live Server(Live Serverで開く)」オプションを選択すると、ブラウザー上でページを確認できます。

動作確認

実行すると、まず以下のような画面が表示されます。

jQueryで選択したチェックボックスの値を取得する方法

次に、表示されているチェックボックスから任意の項目を選択してみましょう。

jQueryで選択したチェックボックスの値を取得する方法

チェックボックスを選択した状態で「Click Me」ボタンをクリックすると、選択されている項目のvalue属性の値がコンソールに出力されます。出力結果は以下のようになります。

jQueryで選択したチェックボックスの値を取得する方法

補足：コンソール以外に出力したい場合

デバッグ用途ではconsole.log()で十分ですが、画面上に結果を表示したい場合は、以下のようにHTML要素へ書き出すことも可能です。

$('input[name="checkDemo"]:checked').each(function () {
    $('#result').append('<p>' + this.value + '</p>');
});

このように、jQueryの:checkedセレクターと.each()メソッドを組み合わせることで、複数選択されたチェックボックスの値を簡単かつ柔軟に取得できます。フォーム送信前のバリデーションや、ユーザーの選択内容に応じた動的なUIの制御など、さまざまな場面で活用できる基本的なテクニックですので、ぜひマスターしておきましょう。

  1. HTMLのrange入力タイプの使い方を解説！スライダーで数値範囲を入力する方法

    HTMLの <input type=range> は、一定の範囲内から値を選択できる入力欄を作成するための要素です。ユーザーにはスライダー（つまみをドラッグするバー）として表示され、マウスやタッチ操作で直感的に数値を指定できます。range入力タイプの基本range型では、選択できる数値に制限を設けることができます。制限を指定するには、以下のような属性を使用します。min：選択可能な最小値を指定します。max：選択可能な最大値を指定します。step：値が変化する間隔（刻み幅）を指定します。例えば「step=5」とすると、0・5・10…のように5刻みで選択されます。これらの属性を省略

  2. HTMLのautocomplete属性の使い方を徹底解説！フォーム入力を便利にする方法

    HTMLのautocomplete属性とは？autocomplete属性は、フォーム要素に対してオートコンプリート（自動補完）機能の有効・無効を設定するために使用されます。この属性をonに設定すると、ブラウザはユーザーが以前そのフィールドに入力した値を基に、候補を自動的に表示します。一方、offに設定した場合は、過去の入力履歴に基づく候補は表示されず、ユーザーは値を手動で入力する必要があります。autocomplete属性に指定できる値番号属性値説明1onデフォルト値です。ブラウザがユーザーの過去の入力履歴に基づいて、値を自動的に補完します。2offブラウザは過去の入力履歴に基づいて値を補完し