ラジオ ボタンは、ユーザーからの入力を受け取るためにフォームで使用されるアイコンです。これにより、ユーザーはラジオ ボタンのグループから 1 つの値を選択できます。ラジオボタンは基本的に次の目的で使用されます。 複数の中から 1 つを選択 、主に GUI フォームで使用されます。
2 つ以上のラジオ ボタンのうち、1 つのラジオ ボタンのみをマーク/チェックできます。この章では、ラジオボタンを使用してラジオボタンをチェックする方法を説明します。 JavaScript プログラミング言語 。
このために、まずラジオを含むフォームを設計します。 ボタン HTML を使用してから、JavaScript プログラミングを使用してラジオ ボタンをチェックします。また、どのラジオ ボタンの値が選択されているかも確認します。
ラジオボタンを作成する
以下は、ラジオ ボタンのグループを作成するための簡単なコードです。
コードをコピーする
Javaのchar + int
好きな季節をお選びください:
夏冬
雨の
秋
今すぐテストしてください
ラジオボタンにチェックを入れる
ラジオ ボタンをチェックするために特別なコードを記述する必要はありません。 HTML 形式で作成または指定すると、それらを確認できます。
ただし、チェックされたラジオ ボタンの値を取得するには JavaScript コードを記述する必要があります。これについては、次の章で説明します。
ラジオボタンが選択されているかどうかを確認してください
JavaScript では、マークされたラジオ ボタンを確認する方法、またはどのラジオ ボタンが選択されているかを識別する方法が 2 つあります。 JavaScript では、このために 2 つの DOM メソッドが提供されています。
input radio selected プロパティは、チェックボックスが選択されているかどうかを確認するために使用されます。使用 document.getElementById('id').checked このための方法。ラジオボタンのチェック状態をブール値として返します。 true または false のいずれかになります。
真実 - ラジオボタンが選択されている場合。
間違い - ラジオボタンが選択/チェックされていない場合。
どのように動作するかについては、以下の JavaScript コードを参照してください。
例
たとえば、Summer という名前のラジオ ボタンがあり、ID = 'Summer' とします。ここで、このボタン ID を使用して、ラジオ ボタンがマークされているかどうかを確認します。
コードをコピーする
if(document.getElementById('summer').checked == true) { document.write('Summer radio button is selected'); } else { document.write('Summer radio button is not selected'); } querySelector()
querySelector() 関数は JavaScript の DOM メソッドです。内部のラジオ ボタンの共通名プロパティを使用します。このメソッドは、以下に示すように、どのラジオ ボタンが選択されているかを確認するために使用されます。
document.querySelector('input[name='JTP']:checked')
例
たとえば、すべてのボタンの名前プロパティ name = 'season' を持つラジオ ボタンのグループがあります。次に、season という名前のこれらのボタンの間で、どれが選択されているかを確認します。
コードをコピーする
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.write('Radio button is selected'); } else { document.write('Nothing has been selected'); } チェックされたラジオボタンの値を取得します。
getElementById() の使用
以下は、getElementById() メソッドを使用してチェックされたラジオ ボタンの値を取得するコードです。
コードをコピーする
if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } querySelector() の使用
以下は、querySelector() メソッドを使用してチェックされたラジオ ボタンの値を取得するコードです。
コードをコピーする
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { alert('Selected radio button values is: ' + getSelectedValue.value); } 選択されたラジオ ボタンの値を取得するための完全なコード
この例では、上記のコードをすべてまとめてラジオ ボタンを作成してチェックします。その後、選択されたラジオ ボタンの値も取得します。
コードをコピーする
<br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { if(document.getElementById('summer').checked) { document.getElementById('disp').innerHTML = document.getElementById('summer').value + ' radio button is checked'; } else if(document.getElementById('winter').checked) { document.getElementById('disp').innerHTML = document.getElementById('winter').value + ' radio button is checked'; } else if(document.getElementById('rainy').checked) { document.getElementById('disp').innerHTML = document.getElementById('rainy').value + ' radio button is checked'; } else if(document.getElementById('autumn').checked) { document.getElementById('disp').innerHTML = document.getElementById('autumn').value + ' radio button is checked'; } else { document.getElementById('error').innerHTML = 'You have not selected any season'; } } 今すぐテストしてください 出力
上記のコードを実行すると、Web 上で実行され、次のような出力が得られます。
いずれかのラジオ ボタンを選択し、 提出する ボタンを押して選択した値を取得します。
データマイニング
季節を選択せずに直接クリックした場合は、 提出する ボタンを押すと、次のようなエラー メッセージが表示されます - 季節を選択していません 検証を使用しているためです。
選択されたラジオ ボタンの値を取得します: querySelector()
DOM querySelector() メソッド
querySelector() 関数は JavaScript の DOM メソッドです。このメソッドは、指定された要素と一致する要素を取得するために使用されます。 CSSセレクター 文書の中で。 HTML コードでラジオ ボタンの name プロパティを指定する必要があることに注意してください。
として使用されます document.querySelector('input[name='JTP']:checked') の中で タブを使用して、ラジオ ボタンのグループから選択したラジオ ボタンの値を確認します。短いコード行を使用して選択されたラジオ ボタンの値を取得することにより、コードの長さを最小限に抑えます。
var selectedValue = document.querySelector('input[name='JTP']:checked')
HTML フォームでどのように使用されるかについては、以下のコードを参照してください。
コードをコピーする
<br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.getElementById('disp').innerHTML = getSelectedValue.value + ' season is selected'; } else { document.getElementById('error').innerHTML = '*You have not selected any season'; } } 今すぐテストしてください 出力
上記のコードを実行すると、以下のような出力が Web 上に表示されます。ここからお好きな季節をお選びください。
指定されたラジオ ボタンの間で値を選択し、 提出する ボタンをクリックすると、選択した値が Web 上で取得されます。
ダーツリスト
をクリックした場合は、 提出する どのラジオ ボタンも選択せずにボタンを押すと、次のようなエラー メッセージが表示されます。 季節を選択していません 。
したがって、ここで両方のことがわかります getElementById('シーズン').value そして document.querySelector('input[name='JTP']:checked') 同じように働きます。どちらも、チェックされたラジオ ボタンの値を検索するために使用されます。どれでも使えます。
getElementById と querySelector の比較
DOM メソッド getElementByID() と querySelector() は両方ともほぼ同じように機能します。ただし、パフォーマンスやコードのサイズなど、いくつかの違いもあります。それらの違いをいくつか見てみましょう。
コードの長さ
getElementById を使用して記述されたコードは、querySelector よりも少し長くなります。 getElementById メソッドを使用して、各ラジオ ボタンがどのラジオ ボタンにチェックされているかを個別に確認する必要があります。
一方、querySelector DOM メソッドを使用する場合は、1 行のコードを追加するだけで、マークされたラジオ ボタンをチェックしてその値を取得できます。したがって、結論としては、querySelector に必要なコードは少なくなります。
パフォーマンス
どちらの関数も優れたパフォーマンスを提供しますが、どちらが優れているかを知る必要があるだけです。の getElementById メソッドよりもはるかに高速です クエリセレクター 方法。 querySelector メソッドも少し複雑です。
DOM メソッドで使用される値
getElementById メソッドは、マークされたボタンをチェックするときに常に各ラジオ ボタンの一意の ID を使用し、その ID と一致する最初の要素を返します。
一方、querySelector は共通の 名前（セレクター） すべてのラジオ ボタンに対してマークされたラジオ ボタンを取得し、指定されたセレクターと一致する最初の要素を返します。