ラジオボタン

学年：
ラジオボタンをjavascriptで取得

let $gakunen = document.getElementsByName("gakunen");

// for ofで radioボタンをループしてそれぞれにイベントを付与する
for (let target of $gakunen) {
	target.addEventListener('change', function () {
     if(target.checked) {
        let $val = target.value;//値
        console.log('チェックされた = ' + $val);
      }
      console.log('チェックされている項目は・・・ ');
     let $checked = document.querySelectorAll("input[name=gakunen]:checked");
      if($checked.length == 0)  console.log('ありません！');
       $checked.forEach((item) => {
         console.log(item.value);
       });

		});
}
チェックボックス

好きな課目：
チェックボックスをjavascriptで取得

let $kamoku = document.getElementsByName("kamoku");

for (let target of $kamoku) {
	target.addEventListener('change', function () {
     if(target.checked) {
        let $val = target.value;//値
        console.log('チェックされた = ' + $val);
      }
      console.log('チェックされている項目は・・・ ');
     let $checked = document.querySelectorAll("input[name=kamoku]:checked");
      if($checked.length == 0)  console.log('ありません！');
       $checked.forEach((item) => {
         console.log(item.value);
       });

		});
}
タブっぽいデザイン（キーボード操作OKタイプ）
  





.like-tab input[type='radio'], .like-tab input[type='checkbox'] {
  position:absolute; top:0; left:0;
}

.like-tab label { position:relative; display:inline-block;
  margin-right:1rem; padding: 0;
}
.like-tab label > .tgu {
  display: inline-block;
  padding: 0.3rem 1rem;
  background-color: #f0f0f0; color:#000;
  border-radius: 0.5rem;
}
.like-tab input:focus + .tgu {
 border: double 2px #83B5FA;
}

.like-tab label > input:checked + .tgu {
 background-color: #1589ee; color:#fff;
}
この文章はダミーです。
セレクトボックス
未選択

 <option hidden>選択してください</option>
セレクトボックスのjavascript


//通常のselectは、selected
<option value="second" selected>Second Value</option>

let $select = document.querySelector('#language');

// 値(数値)を取得
let num = $select.selectedIndex;

// 値(数値)から値(value値)を取得
let $val = $select.options[num].value;
//こっちでもOK??
let $val = $select.color1.options[$select.selectedIndex].value;

$select.addEventListener('change', selectChange, false);
function selectChange(e) {
    let $s = e.target;
    let idx = $s.selectedIndex;
    let $val = $s.options[idx].value; // 値
    let $txt  = $s.options[idx].innerHTML;  // 表示テキスト
    // 値とテキストをコンソールに出力
    console.log('value = ' + $val + ', ' + 'text = ' + $txt);
}

//引数を別にとる場合は・・・
$select.addEventListener('change', selectChange(),false);
function selectChange() {
  return function(e) {
    let $s = e.target;
    let idx = $s.selectedIndex;
    let $val = $s.options[idx].value; // 値
    let $txt  = $s.options[idx].innerHTML;  // 表示テキスト
    // 値とテキストをコンソールに出力
    console.log('value = ' + $val + ', ' + 'text = ' + $txt);
 }
}
セレクトボックス（複数選択可： multiple）実用的でない気がする。checkedでいいよな

複数行表示でスクロール
セレクトボックスのjavascript


  let $contact = document.querySelector('#contact');

  $contact.addEventListener('change', selectMulti, false);


  function selectMulti(e) {
      let $s = e.target;
//multipleの場合は、option:checkedが正しい
      let $sect = $s.querySelectorAll('option:checked');
      $sect.forEach((item) => {
        let $val = item.value; // 値
        let $txt  = item.innerHTML;  // 表示テキスト
// 値とテキストをコンソールに出力
        console.log('value = ' + $val + ', ' + 'text = ' + $txt);
      });


  }