この記事では、JavaScript を使用してチェックボックスをオンまたはオフにする手順について説明します。
JavaScript を使用してチェックボックスをオン/オフにする方法は?
JavaScript でチェックボックスをオンまたはオフにするには、「 チェック済み ' 属性。まず、HTML 要素の参照を取得します。 チェックボックス 」 割り当てられた「 ID 」を使用して getElementById() 」メソッドを適用し、「 チェック済み その値のプロパティ。
例 1: 単一のチェックボックスをオン/オフにする
まず、次のコード行を含む HTML ファイルを作成します。
< h3 > ボタンをクリックして、チェックボックスをオンまたはオフにします h3 >
< 入力方式 = 「チェックボックス」 ID = 「チェックボックス」 > 利用規約に同意する < br >< br >
< ボタンタイプ = 'ボタン' オンクリック = '小切手（）' > はい ボタン >
< ボタンタイプ = 'ボタン' オンクリック = 「チェックを外す()」 > いいえ ボタン >
上記のコードでは:
- ID「」のチェックボックスを作成します チェックボックス ” 要素へのアクセスに使用されます “ チェックボックス 」 アクションを実行します。
- 2 つのボタンを作成します。 はい ' と ' いいえ 」、機能をトリガーするチェックボックスをオンまたはオフにするには「 小切手（） ' と ' チェックを外す() 」それぞれクリックイベントで。
上記のコードを実行すると、出力は次のようになります。
次に、JavaScript ファイルまたはタグのチェックボックスでアクションを実行する関数を定義します。チェックボックスをオンにするには、次のコード行を使用します。
関数 小切手 ( ) {
入力させて = 資料。 getElementById ( 「チェックボックス」 ) ;
入力。 チェック済み = 真実 ;
}
上記のコードでは:
- 関数を定義する」 小切手（） 」をクリックすると、ボタンのクリックがトリガーされ、チェックボックスがオンになります。
- 関数の本体内で、その ID を使用してチェックボックスの参照を取得します。 チェックボックス 」の助けを借りて getElementById() ” メソッドを作成し、変数に格納します ” 入力 」。
- 「 チェック済み ' 財産 ' 真実 」。
「 いいえ 」ボタン、以下のコードを使用します。
関数 チェックを外す ( ) {入力させて = 資料。 getElementById ( 「チェックボックス」 ) ;
入力。 チェック済み = 間違い ;
}
上記のコード スニペット:
- 関数を定義する」 チェックを外す() 」をクリックすると、ボタンのクリックがトリガーされ、チェックボックスがオフになります。
- 関数の本体内で、その ID を使用してチェックボックスの参照を取得します。 チェックボックス 」の助けを借りて getElementById() ” メソッドを呼び出して変数に格納する ” 入力 」。
- 「 チェック済み ' 財産 ' 間違い 」。
最後に、「 window.onload ' イベント：
窓。 オンロード = 関数 ( ) {窓。 addEventListener ( 'ロード' 、 小切手 、 間違い ) ;
}
出力
出力は、ボタンをクリックしているときにチェックボックスが正常にオンおよびオフになったことを示します。
例 2: 複数のチェックボックスをオン/オフにする
すべてのチェックボックスを同時にオンまたはオフにする方法の例を見てみましょう。
最初に HTML ファイルを作成し、複数のチェックボックスと id を持つボタンを作成します。 トグル 」チェックボックスをオンまたはオフに切り替えます。
< h3 > ボタンをクリックして、すべてのチェックボックスをオンまたはオフにします h3 >< 入力方式 = 「チェックボックス」 クラス = 「チェックボックス」 > 私にチェックを入れるか、チェックを外します < br >
< 入力方式 = 「チェックボックス」 クラス = 「チェックボックス」 > 私にチェックを入れるか、チェックを外します < br >
< 入力方式 = 「チェックボックス」 クラス = 「チェックボックス」 > 私にチェックを入れるか、チェックを外します < br >
< 入力方式 = 「チェックボックス」 クラス = 「チェックボックス」 > 私にチェックを入れるか、チェックを外します < br >
< 入力方式 = 「チェックボックス」 クラス = 「チェックボックス」 > 私にチェックを入れるか、チェックを外します < br >< br >
< 入力方式 = 'ボタン' ID = 'トグル' 価値 = 「クリックしてチェックボックスを切り替えます」 >
対応する出力は次のようになります。
その後、JavaScript ファイルまたは