jQuery｜チェックボックスにチェックが入っている要素のみループ処理を行う

実務にて、

チェックボックスにチェックが入っている要素のみ

ループを行う処理の実装を行いました。

実装方法になります。

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Checkbox Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <label><input type="checkbox" class="checkbox-class" value="Option 1"> Option 1</label><br>
    <label><input type="checkbox" class="checkbox-class" value="Option 2"> Option 2</label><br>
    <label><input type="checkbox" class="checkbox-class" value="Option 3"> Option 3</label><br>

    <button id="check-button">チェックされた項目を表示</button>

    <script>
        $('#check-button').click(function() {
            $('.checkbox-class:checked').each(function() {
                console.log($(this).val()); // チェックされたチェックボックスの値をコンソールに表示
            });
        });
    </script>
</body>
</html>

ボタン（#check-button）がクリックされた場合に、

jQueryのコードが実行されます