jQuery checkbox checked 取得

jQuery checkbox checked 取得：輕鬆取得複選框狀態

はじめに

この記事では、jQuery を使用してチェックボックスの選択状態を簡単に取得する方法について説明します。単一および複数のチェックボックスの処理を含む、さまざまな一般的なシナリオについて説明し、簡潔でわかりやすいコード例を提供します。

一、単一チェックボックスの状態を取得する

`$(selector).prop("checked")` メソッドを使用して、単一チェックボックスがオンになっているかどうかを判断します。このメソッドは、true または false を返します。

例：


        <input type="checkbox" id="myCheckbox">

        <script>
        // ID が "myCheckbox" のチェックボックスがオンになっているかどうかを判断します
        if ($('#myCheckbox').prop("checked")) {
            // チェックボックスがオンになっています
        } else {
            // チェックボックスはオフになっています
        }
        </script>

二、複数のチェックボックスの状態を取得する

**2.1 ループを使用してすべてのチェックボックスを反復処理する：**

すべてのターゲットチェックボックスを選択し、ループを使用してオンになっているかどうかを1つずつ判断します。

例：


            <input type="checkbox" class="myCheckboxes">
            <input type="checkbox" class="myCheckboxes">

            <script>
            // クラスが "myCheckboxes" のすべてのチェックボックスを反復処理します
            $('.myCheckboxes').each(function() {
                if ($(this).prop("checked")) {
                    // 現在のチェックボックスはオンになっています
                } else {
                    // 現在のチェックボックスはオフになっています
                }
            });
            </script>

**2.2 `.filter()` メソッドを使用してオンになっているチェックボックスをフィルタリングする：**

`.filter(':checked')` を使用して、オンになっているすべてのチェックボックスをフィルタリングします。

例：


            <input type="checkbox" class="myCheckboxes">
            <input type="checkbox" class="myCheckboxes">

            <script>
            // クラスが "myCheckboxes" で、オンになっているすべてのチェックボックスを取得します
            var checkedCheckboxes = $('.myCheckboxes').filter(':checked');

            // オンになっているチェックボックスの数を取得します
            var checkedCount = checkedCheckboxes.length;
            </script>

三、オンになっているチェックボックスの値を取得する

**3.1 単一のオンになっているチェックボックス:**

`.val()` メソッドを使用して、オンになっているチェックボックスの値を直接取得します。

例：


            <input type="checkbox" id="myCheckbox" value="checkboxValue">

            <script>
            // ID が "myCheckbox" のチェックボックスの値を取得します
            var checkboxValue = $('#myCheckbox:checked').val();
            </script>

**3.2 複数のオンになっているチェックボックス:**

ループまたは `.map()` メソッドを使用して、オンになっているすべてのチェックボックスを反復処理し、その値を取得します。

例：


            <input type="checkbox" class="myCheckboxes" value="value1">
            <input type="checkbox" class="myCheckboxes" value="value2">

            <script>
            // ループを使用して、オンになっているすべてのチェックボックスの値を取得します
            var checkedValues = [];
            $('.myCheckboxes:checked').each(function() {
                checkedValues.push($(this).val());
            });

            // .map() メソッドを使用して、オンになっているすべてのチェックボックスの値を取得します
            var checkedValues = $('.myCheckboxes:checked').map(function() {
                return $(this).val();
            }).get();
            </script>

まとめ

この記事では、jQuery を使用してチェックボックスの選択状態を取得するためのさまざまな方法について説明し、詳細なコード例を示しました。実際のニーズに応じて適切な方法を選択することで、さまざまなチェックボックス操作を簡単に処理できます。

参考文献

よくある質問

質問	回答
jQuery を使用してチェックボックスの選択状態を取得するにはどうすればよいですか？	`$(selector).prop("checked")` メソッドを使用します。
複数のチェックボックスの値を取得するにはどうすればよいですか？	ループまたは `.map()` メソッドを使用して、オンになっているすべてのチェックボックスを反復処理し、その値を取得します。
オンになっているチェックボックスの数を取得するにはどうすればよいですか？	`.filter(':checked')` メソッドを使用して、オンになっているすべてのチェックボックスをフィルタリングし、その長さ (`length`) プロパティを使用します。

その他の参考記事:checkbox jquery 取得