jQuery を使用してチェックボックスのチェック状態を動的に検出するチュートリアル

jQuery チュートリアル: チェック ボックスの選択状態を動的に監視する

Web 開発では、チェック ボックスの選択状態を監視する必要がよくあります。これに基づいて適切な措置を講じます。この機能は jQuery を使用して簡単に実装できるため、ユーザー エクスペリエンスとインタラクションが向上します。このチュートリアルでは、jQuery を使用してチェックボックスのチェック状態を動的に監視する方法を紹介し、具体的なコード例を添付します。

1. jQuery ライブラリをインポートする

始める前に、jQuery ライブラリ ファイルを導入する必要があります。最新バージョンの jQuery ライブラリは、次の CDN リンクから導入できます:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. HTML 構造

次に、いくつかのチェックボックスを含む HTML 構造を作成します。

<input type="checkbox" id="checkbox1">
<label for="checkbox1">选项1</label>
<input type="checkbox" id="checkbox2">
<label for="checkbox2">选项2</label>
<input type="checkbox" id="checkbox3">
<label for="checkbox3">选项3</label>

$(document).ready(function() {
    $('input[type="checkbox"]').change(function() {
        if($(this).is(':checked')) {
            console.log($(this).attr('id') + ' 被选中了');
            // 在这里可以添加相应的操作
        } else {
            console.log($(this).attr('id') + ' 被取消选中了');
            // 在这里可以添加相应的操作
        }
    });
});

• $(document).ready(function() {...}):ドキュメントがロードされたら、その中のコードを実行します。
• $('input[type="checkbox"]').change(function() {...}): チェックボックス型の要素をすべて選択してバインドする ハンドラー関数を定義する変更イベント用。
• $(this).is(':checked'): 現在のチェック ボックスがオンになっているかどうかを判断します。
• $(this).attr('id'): 現在のチェック ボックスの ID 属性を取得します。
• console.log(): 対応するプロンプト情報をコンソールに出力します。実際の状況に応じて他の操作に変更できます。

以上がjQuery を使用してチェックボックスのチェック状態を動的に検出するチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。