はじめに
学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。
HTMLでラジオボタンを作成する
HTML でラジオボタンを表示するには input 要素で type 属性に radio を指定する。
<input type="radio">
⚪︎
ラジオボタンの後にラベルを表示する場合は label 要素と組み合わせる。
<label><input type="radio">オレンジ</label>
⚪︎ オレンジ
ラジオボタンは複数のラジオボタンの中から一つを選択する使い方が一般的。複数のラジオボタンを同じグループにまとめるには、それぞれのラジオボタンの name 属性に同じ値を設定する。また、どのラジオボタンが選択されたのかを後で取得する為、それぞれのラジオボタンの value 属性に異なる値に設定する。
<label><input type="radio" name="fruit" value="orange">オレンジ</label>
<label><input type="radio" name="fruit" value="lemon">レモン</label>
<label><input type="radio" name="fruit" value="strawberry">ストロベリー</label>
⚪︎ オレンジ
⚪︎ レモン
⚪︎ ストロベリー
初期値としていずれかのラジオボタンを選択した状態にするには、対象のラジオボタンに checked 属性を設定する。
<label><input type="radio" name="fruit" value="orange">オレンジ</label>
<label><input type="radio" name="fruit" value="lemon" checked>レモン</label>
<label><input type="radio" name="fruit" value="strawberry">ストロベリー</label>
⚪︎ オレンジ
◉ レモン
⚪︎ ストロベリー
ラジオボタンの値の取得と設定
同じグループのラジオボタンの中で現在選択されているラジオボタンを調べるには、 getElementsByName メソッドを使い指定した name 属性が設定されている要素の一覧を取得したあと、各要素に対して input 要素を表す HTMLInputElement オブジェクトの checked プロパティの値を参照する。
element.checked
checked プロパティの値はチェックされていれば true、チェックされていなければ false にする。
実際には次のように記述します。 checked プロパティが true の要素が見つかったら value プロパティの値を取得する。
let elements = document.getElementsByName('fruit');
let len = elements.length;
let checkValue = '';
for (let i = 0; i < len; i++){
if (elements.item(i).checked){
checkValue = elements.item(i).value;
}
}
同じグループ内のラジオボタンのいずれかを選択するには、先ほどと同じ手順で要素の一覧を取得した後、インデックスを指定して checked プロパティに対して true を設定する。
let elements = document.getElementsByName('fruit');
elements[2].checked = true;
form要素内にラジオボタンがある場合の値の取得と設定
ラジオボタンがフォーム要素内にある場合は別の方法で選択されているラジオボタンを取得することができる。
<form>
<label><input type="radio" name="fruit" value="orange">オレンジ</label>
<label><input type="radio" name="fruit" value="lemon" checked>レモン</label>
<label><input type="radio" name="fruit" value="strawberry">ストロベリー</label>
</form>
⚪︎ オレンジ
◉ レモン
⚪︎ ストロベリー
最初に getElementById などのメソッドを使って form 要素を取得する。
<form id="fruitbox">
...
</form>
<script>
let fruitbox = document.getElementById('fruitbox');
</script>
form 要素に含まれる RadioNodeList オブジェクトを取得する。取得するにはフォームを表す HTMLFormElement オブジェクトの elements プロパティの値に対して対象のラジオボタンで設定している name 属性の値を指定すると RadioNodeList オブジェクトを取得できる。
<form id="fruitbox">
...
</form>
<script>
let fruitbox = document.getElementById('fruitbox');
radioNodeList = fruitbox.elements['fruit'];
</script>
RadioNodeList オブジェクトの value オブジェクトを参照すると、現在選択されているラジオボタンの値を取得することができる。
<form id="fruitbox">
...
</form>
<script>
let fruitbox = document.getElementById('fruitbox');
radioNodeList = fruitbox.elements['fruit'];
let checkValue = radioNodeList.value;
</script>
form 要素に含まれるラジオボタンの中で指定したラジオボタンを選択するには、フォームを表す HTMLFormElement オブジェクトの elements プロパティの値に対してインデックスを指定するとラジオボタンの要素を取得できる。取得したラジオボタンの checked プロパティに対して true を設定する。
<form id="fruitbox">
...
</form>
<script>
let fruitbox = document.getElementById('fruitbox');
radioNodeList = fruitbox.elements[1].checked = true;
</script>
ラジオボタンのイベント処理
ラジオボタンでは新しく選択されたラジオボタンで change イベントが発生する。(選択されていた状態から選択されていない状態に変わっても change イベントは発生しない)。
<label><input type="radio" name="fruit" value="orange" id="fruitRadio1">
オレンジ</label>
<label><input type="radio" name="fruit" value="lemon" id="fruitRadio2">
レモン</label>
<script>
function valueChange(){
// イベントが発生した時の処理
}
let fruitRadio1 = document.getElementById('fruitRadio1');
fruitRadio1.addEventListener('change', valueChange);
let fruitRadio2 = document.getElementById('fruitRadio1');
fruitRadio1.addEventListener('change', valueChange);
</script>
また form 要素内にラジオボタンがある場合、新しいラジオボタンが選択されると form にて change イベントが発生する。
<form id="travelbox">
<label><input type="radio" name="travel" value="okinawa">沖縄</label>
<label><input type="radio" name="travel" value="hokkaidou">北海道</label>
</form>
<script>
function valueChange(){
// イベントが発生した時の処理
}
let travelbox = document.getElementById('travelbox');
travelbox.addEventListener('change', valueChange);
</script>