Web Design Leaves

<form name="myForm">
  <input type="text" name="inputText">
  <input type="submit" name="send">
</form>

//Form オブジェクトに document.forms[0] でアクセスする場合
document.forms[0].elements[0]  //elements[インデックス番号] （最初のコントロール）
document.forms[0].elements['inputText']   //elements["name属性の値"]
document.forms[0]['inputText']   //forms[0] の連想配列
document.forms[0].inputText   //forms[0] のプロパティ

//Form オブジェクトに document.forms['myForm'] でアクセスする場合
document.forms['myForm'].elements[0]
document.forms['myForm'].elements['inputText']
document.forms['myForm']['inputText']
document.forms['myForm'].inputText

//Form オブジェクトに document.forms.myForm でアクセスする場合
document.forms.myForm.elements[0]
document.forms.myForm.elements['inputText']
document.forms.myForm['inputText']
document.forms.myForm.inputText

//Form オブジェクトに document.myForm でアクセスする場合
document.myForm.elements[0]
document.myForm.elements['inputText']
document.myForm['inputText']
document.myForm.inputText 

document.querySelector('form[name="myForm"]').elements[0]

//上記のフォームの場合、最初の要素は以下でも同じこと（name 属性が inputText の要素）
document.querySelector('form[name="myForm"] input[name="inputText"]')

<form name="myForm">
  <h3>My Form</h3>
  <p>Please fill out the form below.</p>
  <input type="text" name="name">
  <input type="email" name="email">
  <button type="submit" name="send">送信</button>
  <button type="reset" name="clear">リセット</button>
</form>

//name 属性が myForm の Form オブジェクト
const myForm = document.myForm;
// または const myForm = document.forms.myForm;

// 上記 Form オブジェクトの elements （フォーム内のコントロール）
const myElements = myForm.elements;

//Form オブジェクトのプロパティ length
console.log(myForm.length);  //4

//elements （フォーム内のコントロール）の要素数
console.log(myElements.length);  //4

//elements （フォーム内のコントロール）の最後の要素
console.log(myElements[myElements.length-1].type); //reset
//elements （フォーム内のコントロール）の最後の要素（上記と同じこと）
console.log(myElements[myForm.length-1].type); //reset

//for 文で各コントロールの name 属性の値を出力
for(let i=0; i< myElements.length; i++) {
  console.log(myElements[i].name);
}

//for 文の出力結果
/*
name
email
send
clear
*/

// for of が使えるので以下でも同じ
for (let elem of myElements) {
  console.log(elem.name);
}

<script>
//name 属性が myForm の form 要素
const myForm = document.myForm;

//フォームのボタンにクリックイベントを登録
myForm.check.addEventListener('click', ()=> {
  //name 属性が myForm の form 要素の fieldset 要素
  const fieldset = myForm.elements.required_field;
  //fieldset 要素の elements プロパティを for 文でループ
  for(let i=0; i<fieldset.elements.length; i++) {
    //elements プロパティの各要素の name プロパティと value プロパティを出力
    console.log(fieldset.elements[i].name + ': ' + fieldset.elements[i].value);
  }
});

//コンソールへの出力例
/*
name: Foo
email: foo@exmaple.com
tel: 123-456-789
*/
</script>

const myForm = document.myForm;

myForm.check.addEventListener('click', ()=> {
  const fieldset = myForm.elements.required_field;
  for (let elem of fieldset.elements) {
    console.log(elem.name + ': ' + elem.value);
  }
});;

<form name="myForm">
  <input type="text" name="myText" required><!-- required 属性を設定-->
  <button name="send">送信</button><!-- type を省略しているので type="submit" と同じ-->
</form>

<form name="myForm">
  <input type="text" name="myText" required><!-- required 属性を設定-->
  <button name="send" type="button">送信</button>
</form>

<script>
//ボタンに click イベントのイベントリスナーを登録
document.myForm.send.addEventListener('click', () => {
  //submit() でフォームを送信
  document.myForm.submit();
});

//フォームに submit イベントのイベントリスナーを登録
document.myForm.addEventListener('submit', () => {
  alert('submit');
});
</script>

<form name="myForm">
  <input type="text" name="myText" required><!-- required 属性を設定-->
  <button name="send" type="button">送信</button>
</form>

<script>
//ボタンに click イベントのイベントリスナーを登録
document.myForm.send.addEventListener('click', () => {
  //コントロールが検証を満たしていれば submit() でフォームを送信
  if(document.myForm.reportValidity()) {
    document.myForm.submit();
  }
});

//フォームに submit イベントのイベントリスナーを登録
document.myForm.addEventListener('submit', () => {
  alert('submit');
});
</script>

<form name="myForm">
  <input type="text" name="myText" required><!-- required 属性を設定-->
  <button name="send" type="button">送信</button>
</form>

<script>
//ボタンに click イベントのイベントリスナーを登録
document.myForm.send.addEventListener('click', () => {
  // requestSubmit() でフォームを送信（送信ボタンのをクリックするのと同じ）
  document.myForm.requestSubmit();
});

//フォームに submit イベントのイベントリスナーを登録
document.myForm.addEventListener('submit', () => {
  alert('submit');
});
</script>

<button id="searchBtn">JavaScript について検索</button>

<script>
  //form 要素を作成
  const searchForm = document.createElement('form');
  //form 要素の action 属性を設定（送信先を Google 検索へ）
  searchForm.action = 'https://google.com/search';
  //form 要素の method 属性に GET を設定（URL に ? 区切りで値を追加して送信）
  searchForm.method = 'GET';
  //form 要素の target 属性（結果を表示する場所）に _blank を設定
  searchForm.target = '_blank';
  //form 要素に送信する input 要素を追加（GET メソッドに q=JavaScript が追加される）
  searchForm.innerHTML = '<input name="q" value="JavaScript">';
  //form 要素を非表示に
  searchForm.style.setProperty('display', 'none');
  //body に生成した form 要素を追加
  document.body.append(searchForm);

  //既存のボタンに click イベントのイベントリスナーを登録
  document.getElementById('searchBtn').addEventListener('click', () => {
    //ボタンをクリックしたら作成したフォームを送信
    searchForm.submit();
  });

</script>

<input type="text" id="myText" size="20">
<button type="button" id="btn">Click</button>

<script>
  document.getElementById('btn').addEventListener('click', () => {
    //value プロパティで値を取得
    let myTextValue = document.getElementById('myText').value;
    //前後の空白を削除（間の空白は削除されない）
    myTextValue = myTextValue.trim();
    //前後の空白を覗いた文字数を length で取得
    const myTextLength = myTextValue.length;
    //値と文字数をアラート表示
    alert('入力値： ' + myTextValue + ' 文字数： ' + myTextLength);
  });
</script>

<form name="myForm" id="myForm">
  <div>
    <label for="name">Name: </label>
    <input type="text" name="name" id="name" size="30">
  </div>
  <div>
    <label for="email">E-mail: </label>
    <input type="text" name="email" id="email" size="30">
  </div>
  <div>
    <label for="tel">TEL: </label>
    <input type="text" name="tel" id="tel" size="30">
  </div>
  <input type="button" name="check" id="check" value="Check">
  <input type="reset" value="Reset">
</form>

//name 属性が check のボタン要素にクリックイベントを登録
document.myForm.check.addEventListener('click', ()=> {
  //name 属性が name のテキストフィールドの値
  const name = document.myForm.name.value;
  //name 属性が email のテキストフィールドの値
  const email = document.myForm.email.value;
  //name 属性が tel のテキストフィールドの値
  const tel = document.myForm.tel.value;
  console.log('名前: ' + name);
  console.log('メール: ' + email);
  console.log('電話: ' + tel);
});

//コンソールへの出力例
/*
名前: Foo
メール: foo@example.com
電話: 123-456-7890
*/ 

//name 属性が myForm の form 要素
const myForm = document.myForm;
// または const myForm = document.forms.myForm; など

//name 属性が check のボタン要素にクリックイベントを登録
myForm.check.addEventListener('click', ()=> {
  //name 属性が name のテキストフィールドの値
  const name = myForm.name.value;
  //name 属性が email のテキストフィールドの値
  const email = myForm.email.value;
  //name 属性が tel のテキストフィールドの値
  const tel = myForm.tel.value;
  console.log('名前: ' + name);
  console.log('メール: ' + email);
  console.log('電話: ' + tel);
}); 

//name 属性が myForm の form 要素
const myForm = document.querySelector('form[name="myForm"]');
//上記 form 要素 を基点に name 属性が check の要素（ボタン）を取得
const check_btn = myForm.querySelector('input[name="check"]');

check_btn.addEventListener('click', ()=> {
  //上記 form 要素 を基点に name name 属性が name の要素を取得
  const name = myForm.querySelector('input[name="name"]').value;
  const email = myForm.querySelector('input[name="email"]').value;
  const tel = myForm.querySelector('input[name="tel"]').value;
  console.log('名前: ' + name);
  console.log('メール: ' + email);
  console.log('電話: ' + tel);
});

//id 属性が myForm の要素
const myForm = document.getElementById('myForm');
//id 属性が check の要素
const check_btn = document.getElementById('check');

check_btn.addEventListener('click', ()=> {
  //getElementById() で要素にアクセスしてその値（.value）を取得
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const tel = document.getElementById('tel').value;
  console.log('名前: ' + name);
  console.log('メール: ' + email);
  console.log('電話: ' + tel);
});

function h(str){
  return str.replace(/&/g, '&')
            .replace(/"/g, '"')
            .replace(/'/g, ''')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
} 

<form name="myForm">
  <div>
    <label for="name">Name: </label>
    <input type="text" name="name" id="name" size="30">
  </div>
  <div>
    <label for="email">E-mail: </label>
    <input type="text" name="email" id="email" size="30">
  </div>
  <div>
    <label for="tel">TEL: </label>
    <input type="text" name="tel" id="tel" size="30">
  </div>
  <button type="button" name="check">Check</button>
  <button type="reset" name="clear">Reset</button>
  <div class="output_div">
    <textarea name="output" rows="3" cols="50" readonly></textarea>
  </div>
</form>
<script>
//サニタイジング用関数
function h(str){
  return str.replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}

//name 属性が myForm の form 要素
const myForm = document.myForm;
//上記 form 要素（myForm）の name 属性が output の要素（テキストエリア）
const output = myForm.output;

myForm.check.addEventListener('click', ()=> {
  //name 属性が name のテキストフィールドの値
  const name = myForm.name.value;
  //name 属性が email のテキストフィールドの値
  const email = myForm.email.value;
  //name 属性が tel のテキストフィールドの値
  const tel = myForm.tel.value;
  //テキストエリアの値に h() でエスケープした値を出力
  output.innerHTML =  '名前: ' + h(name) + '\nメール: ' + h(email) + '\n電話: ' + h(tel);
});

myForm.clear.addEventListener('click', ()=> {
  //出力をクリア
  output.innerHTML = '';
});
</script> 

<form>
  <input type="text" name="city" value="初期値" size="30">
  <button type="reset">Reset</button>
</form>

<form name="myForm">
  <div> City:
    <input type="text" name="inputCity" value="City Name" size="30">
  </div>
  <input type="button" name="check" value="Check">
  <input type="button" name="change" value="Change Default">
  <input type="reset" value="Reset">
  <input type="button" name="resetDefault" value="Reset Default">
  <div class="output_div">
    <label for="output">value（入力された値）: </label>
    <textarea name="output" id="output" rows="1" cols="50" readonly></textarea>
    <label for="output-2">defaultValue（初期値）: </label>
    <textarea name="output2" id="output-2"  rows="1" cols="50" readonly></textarea>
  </div>
</form>
<script>
//name 属性が myForm の form 要素
const myForm = document.myForm;
//myForm の name 属性が inputCity の要素（テキストフィールド）
const inputCity = myForm.inputCity;
//テキストフィールドの初期値（defaultValue プロパティ）を保存
const inputCityDefault = myForm.inputCity.defaultValue;

//「Check」ボタンにクリックイベントのイベントリスナーを登録
myForm.check.addEventListener('click', ()=> {
  //入力された値を出力
  myForm.output.textContent = inputCity.value;
  //初期値（defaultValue プロパティ）を出力
  myForm.output2.textContent = inputCity.defaultValue;
});

//「Change Default」ボタンにクリックイベントのイベントリスナーを登録
myForm.change.addEventListener('click', ()=> {
  //初期値（defaultValue プロパティ）を入力された値に変更
  inputCity.defaultValue = inputCity.value;
})

//「Reset Default」ボタンにクリックイベントのイベントリスナーを登録
myForm.resetDefault.addEventListener('click', ()=> {
  //初期値（defaultValue プロパティ）を保存した元の値にに戻す
  inputCity.defaultValue = inputCityDefault
})
</script>

<form name="myForm" method="post">
  <div>
    <label for="email1">E-mail: </label><br>
    <input type="email" required name="email1" id="email1" size="20">
  </div>
  <div>
    <label for="email2">E-mail（確認）:
      <span id="errorMsg" style="color: red;"></span> </label><br>
    <input type="email" required name="email2" id="email2" size="20">
  </div>
  <div>
    <input type="submit" name="send" value="送信">
    <input type="reset" name="reset" value="Reset">
  </div>
</form>
<script>
  //name 属性が myForm の form 要素
  const myForm = document.myForm;
  //メッセージを表示する id 属性が errorMsg の span 要素
  const errorMsg = document.getElementById('errorMsg');

  //フォームに submit イベントのイベントリスナーを登録
  myForm.addEventListener('submit', (e) => {
    //メッセージを表示する span 要素のテキストを空に
    errorMsg.textContent = '';
    //email1 と email2 の値が異なればメッセージを表示して送信を中止
    if(myForm.email1.value !== myForm.email2.value ) {
      errorMsg.textContent = "メールアドレスが一致しません。";
      //引数に渡されるイベント（e）のメソッドを使ってフォームの送信を中止
      e.preventDefault();
    }
  });

  //Reset ボタンをクリックしたらメッセージもクリア
  myForm.reset.addEventListener('click', () => {
    //メッセージを表示する span 要素のテキストを空に
    errorMsg.textContent = '';
  });
</script> 

<form name="myForm" method="post">
  <div>
    <label for="email1">E-mail: </label><br>
    <input type="email" name="email1" id="email1" size="20" required>
  </div>
  <div>
    <label for="email2">E-mail（確認）:
      <span id="errorMsg" style="color: red;"></span> </label><br>
    <input type="email" name="email2" id="email2" size="20" required>
  </div>
  <div>
    <input type="submit" name="send" value="送信">
    <input type="reset" name="reset" value="リセット">
  </div>
</form>
  </div>
<script>
  //name 属性が myForm の form 要素
  const myForm = document.myForm;
  //メッセージを表示する id 属性が errorMsg の span 要素
  const errorMsg = document.getElementById('errorMsg');
  //name 属性が email1 の input 要素
  const inputEmail1 = myForm.email1;
  //name 属性が email2 の input 要素
  const inputEmail2 = myForm.email2;

  //フォームに submit イベントのイベントリスナーを登録
  myForm.addEventListener('submit', (e) => {
    //メッセージを表示する span 要素のテキストを空に
    errorMsg.textContent = '';
    //email1 と email2 の値が異なればメッセージを表示して送信を中止
    if(myForm.email1.value !== myForm.email2.value ) {
      errorMsg.textContent = "メールアドレスが一致しません。";
      //フォームの送信を中止
      e.preventDefault();
    }
  });

  //Reset ボタンをクリックしたらメッセージもクリア
  myForm.reset.addEventListener('click', () => {
    //メッセージを表示する span 要素のテキストを空に
    errorMsg.textContent = '';
  });

  //email1 のテキストフィールドに copy イベントのイベントリスナーを登録
  inputEmail1.addEventListener('copy', (e) => {
    // e.type で発生したイベント名を取得してメッセージを表示
    errorMsg.textContent = e.type + ' はできません。';
    //コピーを禁止（させない）
    e.preventDefault();
  });

  //email2 のテキストフィールドに paste イベントのイベントリスナーを登録
  inputEmail2.addEventListener('paste', (e) => {
    errorMsg.textContent = e.type + ' はできません。';
    //ペーストを禁止（させない）
    e.preventDefault();
  });

  //email1 のテキストフィールドに input イベントのイベントリスナーを登録
  inputEmail1.addEventListener('input', () => {
    //入力された内容が変わるとメッセージをクリア
    errorMsg.textContent = '';
  });

  //email2 のテキストフィールドに input イベントのイベントリスナーを登録
  inputEmail2.addEventListener('input', () => {
    //入力された内容が変わるとメッセージをクリア
    errorMsg.textContent = '';
  })

</script>

<input type="text" id="textInput"  size="40">

<button type="button" id="reverse">Reverse</button>
<button type="button" id="clear" class="clear">Clear</button>

<div id="outputText" class="output"></div>

<script>
  const textInput = document.getElementById('textInput');
  const outputText = document.getElementById('outputText');

  //Reverse ボタンに click イベントのイベントリスナーを登録
  document.getElementById('reverse').addEventListener('click', () => {
    //入力された文字列を逆順にして出力
    outputText.textContent = textInput.value.split('').reverse().join('');
  });

  //Clear ボタンに click イベントのイベントリスナーを登録
  document.getElementById('clear').addEventListener('click', () => {
    //入力された値と出力をクリア
    outputText.textContent = '';
    textInput.value = '';
  });
</script> 

<input type="text" name="textInput" size="40" placeholder="テキストを入力">
<p id="outputText" class="output"></p>

<script>
//テキストフィールド（name 属性が textInput）の input 要素を取得
const textInput = document.querySelector('input[name="textInput"]');
//出力先の id 属性が output の p 要素を取得
const outputText = document.getElementById('outputText');

//テキストフィールドに input イベントを登録
textInput.addEventListener('input', (e) => {
  //出力先の p 要素の textContent にテキストフィールドに入力された値を設定
  outputText.textContent = e.target.value;
});
</script> 

const textInput = document.getElementById('textInput');
const outputs = document.getElementsByClassName('output');
const eventCounts = document.getElementsByClassName('eventCount');
const events = ['input','beforeinput','change','keydown','keyup','focus','blur'];
let counts = Array(events.length);
counts.fill(0);

//addEventListener を使ってそれぞれのイベントを登録する関数の定義
function addMyEvents(eventTarget, event, output, count, countOut) {
  //eventTarget に event で指定されたイベントを登録
  eventTarget.addEventListener(event, (e) => {
    //output に指定された要素の textContent プロパティに入力された値を出力
    output.textContent = e.target.value;
    //発生回数を1増加
    count ++;
    //countOut に指定された要素の textContent プロパティに発生回数を出力
    countOut.textContent = count;
  });
}

//上記関数を使って同じ要素に異なるイベントのイベントリスナーを登録
for(let i=0; i<events.length; i++) {
  addMyEvents(textInput, events[i], outputs[i], counts[i], eventCounts[i]);
}

//id 属性が clear の要素に click イベントのイベントリスナーを登録
document.getElementById('clear').addEventListener('click', ()=> {
  //テキストフィールドの value プロパティに空文字を設定
  textInput.value = '';
  //td 要素の textContent プロパティに空文字を設定
  for(let i=0; i<events.length; i++) {
    outputs[i].textContent = '';
    eventCounts[i].textContent = '';
    //それぞれのカウントをクリアするつもり
    counts[i] = 0; //※ 実際にはクリアできない（それぞれの値は保持されたまま）
  }
}); 

<textarea name="textArea" id="textArea" cols="30" rows="5"></textarea>
<button type="button" id="btn">Click</button>
<div id="output"></div>

<script>
  document.getElementById('btn').addEventListener('click', () => {
    //テキストエリアに入力された値
    const textAreaValue = document.getElementById('textArea').value;
    if(textAreaValue.trim() ==='') {
      alert('値が入力されていないか空白文字です。')
    }else{
      document.getElementById('output').innerText = textAreaValue;
      //innerText の代わりに textContent を使うと改行は取り除かれます
    }
  }, false);
</script> 

<textarea name="comment" rows="5" cols="50" placeholder="コメント"></textarea>
<p><span id="count">0</span>/100</p>

<script>
//テキストエリア要素（name="comment" のテキストエリアがページに1つだけある場合）
const textArea = document.querySelector('textarea[name="comment"]');
//文字数を出力する span 要素
const countOut = document.getElementById('count');
//上記 span 要素のスタイル
const countOutStyle = countOut.style;

//テキストエリアに input イベントを登録
textArea.addEventListener('input', (e) => {
  //テキストエリアに入力されている文字の長さ（文字数）
  const count = e.currentTarget.value.length; //または e.currentTarget.textLength;

  //span 要素に文字数を出力
  countOut.textContent = count;

  //文字数が100より大きい場合は文字を赤色に
  if(count > 100) {
    countOutStyle.setProperty('color', 'red');
    // または countOutStyle.color = 'red';
  }else{
    //100文字未満の場合は文字を元に戻す
    countOutStyle.removeProperty('color');
    // または countOutStyle.color = null;
  }
});
</script>

<textarea id="myTextarea"></textarea>
<button type="button" id="setTextarea1">改行なし</button>
<button type="button" id="setTextarea2">改行あり</button>
<script>
//テキストエリア
const myTextareaElem = document.getElementById('myTextarea');

//改行なしの文字列
const noLineBreak = 'Hello World!'
//改行（\n）を含む文字列
const withLineBreak = 'Hello \nWorld!'

document.getElementById('setTextarea1').addEventListener('click', () => {
  //改行なしの文字列をテキストエリアに設定
  myTextareaElem.value = noLineBreak;
});

document.getElementById('setTextarea2').addEventListener('click', () => {
  //改行を含む文字列をテキストエリアに設定
  myTextareaElem.value = withLineBreak;
});
</script>

//テンプレートリテラル
const withLineBreak = `Hello
World!`;

<textarea id="myTextarea" cols="50" rows="5"></textarea>
<button type="button" id="textContentOut">textContent</button>
<button type="button" id="innerTextOut">innerText</button>
<button type="button" id="clear">Clear</button>
<div id="myOutput"></div>

<script>
//テキストエリア
const myTextareaElem = document.getElementById('myTextarea');
//出力先の div 要素
const myOutputElem =  document.getElementById('myOutput');

document.getElementById('innerTextOut').addEventListener('click', () => {
  //テキストエリアに入力された値を出力先に innerText を使って設定
  myOutputElem.innerText = myTextareaElem.value;
});

document.getElementById('textContentOut').addEventListener('click', () => {
  //テキストエリアに入力された値を出力先に textContent を使って設定
  myOutputElem.textContent = myTextareaElem.value;
});

document.getElementById('clear').addEventListener('click', () => {
  //テキストエリアの値をクリア
  myTextareaElem.value = '';
  //出力先 div 要素の値をクリア
  myOutputElem.innerText = '';
});
</script>

let value = str.replace(/\n/g, '<br>');

//改行コードを <br> に変換する関数を定義
const nl2br = (str) => {
  return str.replace(/\n/g, '<br>');
}

//改行コードを含む文字列
let taString = 'Hello \nWorld!';
//nl2br() で改行コードを <br> に変換してコンソールに出力
console.log(nl2br(taString)); //Hello <br>World!

<textarea id="myTextarea" cols="50" rows="5"></textarea>
<button type="button" id="convert">出力</button>
<button type="button" id="clear">クリア</button>
<div id="myOutput"></div>

<script>
//特殊文字をエスケープして無害化する関数
function h(str){
  return str.replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}

//テキストエリア
const myTextareaElem = document.getElementById('myTextarea');
//出力先の div 要素
const myOutputElem =  document.getElementById('myOutput');

document.getElementById('convert').addEventListener('click', () => {
  //テキストエリアの値をエスケープ処理
  const escapedValue = h(myTextareaElem.value);
  //改行コードを <br> タグに変換
  const convertedValue = escapedValue.replace(/\n/g, '<br>');
  //出力先 div 要素の innerHTML プロパティに変換した値を設定
  myOutputElem.innerHTML = convertedValue;
});

document.getElementById('clear').addEventListener('click', () => {
  //テキストエリアの値をクリア
  myTextareaElem.value = '';
  /出力先 div 要素の値をクリア
  myOutputElem.innerHTML = '';
});
</script>

<input type="checkbox" name="music" value="jazz" checked> Jazz
<input type="checkbox" name="music" value="hiphop"> Hip Hop
<input type="checkbox" name="music" value="classic"> Classic

<script>
//querySelector() で name="music" の最初の要素を取得してその value プロパティを出力
console.log(document.querySelector('input[name="music"]').value); //jazz

// querySelectorAll() で name="music" の全ての要素を取得
const musicCheckboxes = document.querySelectorAll('input[name="music"]');

for(let i=0; i<musicCheckboxes.length; i++) {
  //各要素の値をコンソールに出力
  console.log( 'musicCheckboxes[' + i + '] : ' + musicCheckboxes[i].value);
}

//以下は出力結果
//musicCheckboxes[0] : jazz
//musicCheckboxes[1] : hiphop
//musicCheckboxes[2] : classic
</script> 

const musicCheckboxes = document.querySelectorAll('input[name="music"]');

//NodeList のメソッド forEach()
musicCheckboxes.forEach((elem,index) => {
  console.log('musicCheckboxes[' + index + '] : ' + elem.value);
});

//以下は出力結果
//musicCheckboxes[0] : jazz
//musicCheckboxes[1] : hiphop
//musicCheckboxes[2] : classic

//ES6 の for of 文
for (let elem of musicCheckboxes) {
  console.log(elem.value);
}

//以下は出力結果
//jazz
//hiphop
//classic

<div>
  <input type="checkbox" name="check" value="1"> value 1
  <input type="checkbox" name="check" value="2"> value 2
  <input type="checkbox" name="check" value="3"> value 3
</div>
<button type="button" name="checkButton">Check</button>

<script>
//name="check" の全てのチェックボックスの要素を取得（NodeList）
const checkboxes = document.querySelectorAll('[name="check"]');
//name="checkButton" のボタン要素を取得
const btn = document.querySelector('[name="checkButton"]');

//ボタンに click イベントのイベントリスナーを登録
btn.addEventListener('click', () => {
  //for 文で各要素の checked プロパティを調べる
  for(let i=0; i<checkboxes.length; i++) {
    //checked プロパティが true の場合
    if(checkboxes[i].checked === true)  { // if(checkboxes[i].checked) でも同じ
      //checkboxes[i] は選択されているチェックボックスなのでその値とインデックスを出力
      console.log('index: ' + i + ' value: ' + checkboxes[i].value);
    }
  }
});
</script>

btn.addEventListener('click', () => {
  //NodeList のメソッド forEach()
  checkboxes.forEach((elem, index) => {
    //checked プロパティが true の場合
    if (elem.checked) {
      console.log('index: ' + index + ' value: ' + elem.value);
    }
  });
});

<div>
  <input type="checkbox" name="music" id="cboxJazz" value="jazz" checked>
  <label for="cboxJazz"> Jazz </label>
  <input type="checkbox" name="music" id="cboxHiphop" value="hiphop">
  <label for="cboxHiphop"> Hip Hop </label>
  <input type="checkbox" name="music" id="cboxClassic" value="classic">
  <label for="cboxClassic"> Classic </label>
</div>
<button type="button" name="checkButton">Check</button>
<div id="output"></div>

<script>
//name="music" の全てのチェックボックスの要素を取得（NodeList）
const musicCheckboxes = document.querySelectorAll('[name="music"]');
//出力先の div 要素
const output = document.getElementById('output');

//ボタンに click イベントのイベントリスナーを登録
document.querySelector('[name="checkButton"]').addEventListener('click', () => {
  //選択されたチェックボックスの値を格納する配列
  const checked_list = [];
  //for 文で各要素の checked プロパティを調べる
  for(let i=0; i<musicCheckboxes.length; i++) {
    //checked プロパティが true の場合
    if (musicCheckboxes[i].checked) {
      //配列 hecked_list に値を追加
      checked_list.push(musicCheckboxes[i].value);
    }
  }
  //選択されたチェックボックスの値をスペース区切りで繋げて出力
  output.textContent = checked_list.join(' ');
});
</script>

<div>
  <input type="checkbox" name="music" id="cboxJazz" value="jazz" checked>
  <label for="cboxJazz"> Jazz </label>
  <input type="checkbox" name="music" id="cboxHiphop" value="hiphop">
  <label for="cboxHiphop"> Hip Hop </label>
  <input type="checkbox" name="music" id="cboxClassic" value="classic">
  <label for="cboxClassic"> Classic </label>
</div>
<button type="button" name="checkButton">Check</button>
<button type="button" name="selectAll">Select All</button>
<button type="button" name="clearAll">Clear All</button>
<div id="output"></div>
<script>
//name="music" の全てのチェックボックス要素を取得
const musicCheckboxes = document.querySelectorAll('[name="music"]');
const output = document.getElementById('output');

//Check ボタンに click イベントのイベントリスナーを登録（前述の例と同じ）
document.querySelector('[name="checkButton"]').addEventListener('click', () => {
  const checked_list = [];
  for(let i=0; i<musicCheckboxes.length; i++) {
    if (musicCheckboxes[i].checked) { //(musicCheckboxes[i].checked === true)
      checked_list.push(musicCheckboxes[i].value);
    }
  }
  output.textContent = checked_list.join(' ');
});

//Select All ボタンに click イベントのイベントリスナーを登録（全てを選択状態に）
document.querySelector('[name="selectAll"]').addEventListener('click', () => {
  //ループで各要素の checked プロパティに true を設定
  for(let i=0; i<musicCheckboxes.length; i++) {
      musicCheckboxes[i].checked = true;
  }
});

//Clear All ボタンに click イベントのイベントリスナーを登録（全ての選択を解除）
document.querySelector('[name="clearAll"]').addEventListener('click', () => {
  //ループで各要素の checked プロパティに false を設定
  for(let i=0; i<musicCheckboxes.length; i++) {
      musicCheckboxes[i].checked = false;
  }
});
</script> 

<div>
  <input type="checkbox" name="check" value="1"> value 1
  <input type="checkbox" name="check" value="2"> value 2
  <input type="checkbox" name="check" value="3"> value 3
</div>
<button type="button" name="checkButton">Check</button>

<script>
//name="checkButton" のボタン要素を取得
const btn = document.querySelector('[name="checkButton"]');

//ボタンに click イベントのイベントリスナーを登録
btn.addEventListener('click', () => {
  //選択されている（:checked）状態の name="check" の要素全てを取得（NodeList）
  const checkedItems = document.querySelectorAll('[name="check"]:checked');
  //選択されている状態の要素全ての値（value）を出力（全ての要素の checked プロパティは true）
  for(let i=0; i<checkedItems.length; i++) {
    console.log('value: ' + checkedItems[i].value);
  }
});
</script> 

<div>
  <input type="checkbox" name="music" id="cboxJazz" value="jazz" checked>
  <label for="cboxJazz"> Jazz </label>
  <input type="checkbox" name="music" id="cboxHiphop" value="hiphop">
  <label for="cboxHiphop"> Hip Hop </label>
  <input type="checkbox" name="music" id="cboxClassic" value="classic">
  <label for="cboxClassic"> Classic </label>
</div>
<button type="button" name="checkButton">Check</button>
<div id="output"></div>
<script>

//出力先の div 要素
const output = document.getElementById('output');
//name="music" の全てのチェックボックス要素（NodeList）
const musicCheckboxes = document.querySelectorAll('[name="music"]');

//Check ボタンに click イベントのイベントリスナーを登録
document.querySelector('[name="checkButton"]').addEventListener('click', () => {
  //name="music" の選択された（:checked の）チェックボックス要素
  const checkedBoxes = document.querySelectorAll('[name="music"]:checked');
  //選択されたチェックボックスの値を格納する配列
  const checked_list = [];
  //ループで各要素の値（value）を配列に追加
  for(let i=0; i<checkedBoxes.length; i++) {
      checked_list.push(checkedBoxes[i].value);
  }
  //選択されたチェックボックスの値を出力
  output.textContent = checked_list.join(' ');
});
</script>

input:checked + label {
  color: red;
}

<input type="checkbox" name="check" value="1"> value 1
<input type="checkbox" name="check" value="2"> value 2
<input type="checkbox" name="check" value="3"> value 3

<script>
//name 属性が check の要素を querySelectorAll() で全て取得
const checkboxes = document.querySelectorAll('[name="check"]');

//for 文で各要素にイベント処理を設定
for(let i=0; i<checkboxes.length; i++) {
  // 各要素に change イベントのリスナーを登録
  checkboxes[i].addEventListener('change', (e) => {
    //その要素（e.currentTarget）の checked プロパティを調べる
    if( e.currentTarget.checked ) {
      //true であれば選択された
      console.log(e.currentTarget.value + 'が選択されました。');
    }else{
      //false であれば（true でなければ）選択されていない
      console.log(e.currentTarget.value + 'が解除されました。');
    }
  })
}
</script> 

//ES6 の for of 文を使う場合
for(elem of checkboxes) {
  elem.addEventListener('change', (e) => {
    if( e.currentTarget.checked ) {
      console.log(e.currentTarget.value + 'が選択されました。');
    }else{
      console.log(e.currentTarget.value + 'が解除されました。');
    }
  })
}

//NodeList の forEach() メソッドを使う場合
checkboxes.forEach((elem) => {
  elem.addEventListener('change', (e) => {
    if( e.currentTarget.checked ) {
      console.log(e.currentTarget.value + 'が選択されました。');
    }else{
      console.log(e.currentTarget.value + 'が解除されました。');
    }
  })
});

<div>
  <label><input type="checkbox" name="check" value="1"> value 1 </label>
  <label><input type="checkbox" name="check" value="2"> value 2 </label>
  <label><input type="checkbox" name="check" value="3"> value 3 </label>
</div>
<p>change event: <span id="changeEvent"></span></p>
<p>input event: <span id="inputEvent"></span></p>
<p>Checked Items: <span id="checkedItems"></span></p>

<script>
//name 属性が check の要素を querySelectorAll() で全て取得
const checkboxes = document.querySelectorAll('[name="check"]');
//change イベントが発生した際にメッセージを出力する span 要素
const changeEventOut = document.getElementById('changeEvent');
//input イベントが発生した際にメッセージを出力する span 要素
const inputEventOut = document.getElementById('inputEvent');
//change イベントが発生した際に選択されているチェックボックスの値を出力する span 要素
const checkedItems = document.getElementById('checkedItems');
//選択された全てのチェックボックスの値を格納する配列
let checked_list = [];


//for 文で各要素に change イベントのイベントリスナーを登録
for(let i=0; i<checkboxes.length; i++) {
  checkboxes[i].addEventListener('change', (e) => {
    //イベントが発生したらコンソールに「change event」と出力
    console.log('change event');
    //イベントの発生した要素（e.target）の checked プロパティを調べる
    if( e.target.checked ) {
      //その要素が選択された場合（checked が true の場合）
      changeEventOut.textContent = e.target.value + 'が選択されました。';
    }else{
      //その要素の選択が解除された場合（checked が false の場合）
      changeEventOut.textContent = e.target.value + 'が解除されました。';
    }
    //選択されたチェックボックスの値を格納する配列を初期化
    checked_list = [];
    //全てのチェックボックスの checked を調べて true であれば配列に追加
    for(let j=0; j<checkboxes.length; j++) {
      if (checkboxes[j].checked) {
        checked_list.push(checkboxes[j].value);
      }
    }
    //選択された全てのチェックボックスの値を出力
    checkedItems.textContent = checked_list.join(' ');
  });
}

 //for 文で各要素に input イベントのイベントリスナーを登録
for(let i=0; i<checkboxes.length; i++) {
  checkboxes[i].addEventListener('input', (e) => {
    //イベントが発生したらコンソールに「input event」と出力
    console.log('input event');
    //イベントの発生した要素（e.target）の checked プロパティを調べる
    if( e.target.checked ) {
      //その要素が選択された場合（checked が true の場合）
      inputEventOut.textContent = e.target.value + 'が選択されました。';
    }else{
      //その要素の選択が解除された場合（checked が false の場合）
      inputEventOut.textContent = e.target.value + 'が解除されました。';
    }
  });
}
</script>

<p id="target">Lorem ipsum dolor sit amet, ... blanditiis.</p>
<input type="checkbox" id="border" value="3px solid #ccc"> Border
<input type="checkbox" id="bgColor" value="#CEDDF7"> Background Color
<input type="checkbox" id="fontWeight" value="700"> Bold
<p> Padding:
  <input type="range" id="padding" min="0" max="30" value="0" step="1">
  <span id="paddingVal">0</span> </p>

<script>
//操作対象の id が target の p 要素
const target = document.getElementById('target');
//スライダーの値を出力する id が paddingVal の span 要素
const paddingVal = document.getElementById('paddingVal');

//id が border のチェックボックスにイベントリスナーを登録
document.getElementById('border').addEventListener('change', (e) => {
  if( e.currentTarget.checked ) {
    //チェックボックスが選択された場合（対象要素のスタイルを設定）
    target.style.setProperty('border', e.currentTarget.value);
  }else{
    //チェックボックスが解除された場合（対象要素のスタイルを削除）
    target.style.removeProperty('border');
  }
});

//id が bgColor のチェックボックスにイベントリスナーを登録
document.getElementById('bgColor').addEventListener('change', (e) => {
  if( e.currentTarget.checked ) {
    target.style.setProperty('background-color', e.currentTarget.value);
  }else{
    target.style.removeProperty('background-color');
  }
});

//id が fontWeight のチェックボックスにイベントリスナーを登録
document.getElementById('fontWeight').addEventListener('change', (e) => {
  if( e.currentTarget.checked ) {
    target.style.setProperty('font-weight', e.currentTarget.value);
  }else{
    target.style.removeProperty('font-weight');
  }
});

//id が padding の input 要素（スライダー）にイベントリスナーを登録
document.getElementById('padding').addEventListener('input', (e) => {
  //スライダーの値
  const paddingValue = e.currentTarget.value;
  //span 要素のテキストにスライダーの値を設定
  paddingVal.textContent = paddingValue;
  //スライダーの値を対象要素の padding に設定
  target.style.setProperty('padding', paddingValue + 'px');
});

</script>

//イベントリスナーを登録する関数
const addMyChangeListener = (id, prop )=> {
  document.getElementById(id).addEventListener('change', (e) => {
    if( e.currentTarget.checked ) {
      //チェックボックスが選択された場合（対象要素のスタイルを設定）
      target.style.setProperty(prop, e.currentTarget.value);
    }else{
      //チェックボックスが解除された場合（対象要素のスタイルを削除）
      target.style.removeProperty(prop);
    }
  });
}
//上記関数を使ってリスナーを登録
addMyChangeListener('border', 'border');
addMyChangeListener('bgColor', 'background-color');
addMyChangeListener('fontWeight', 'font-weight');

<div id="checkboxWrapper">
  <input type="checkbox" name="check" value="1">value 1
  <input type="checkbox" name="check" value="2">value 2
  <input type="checkbox" name="check" value="3">value 3
</div>
<script>
// チェックボックスを囲む div 要素
const wrapperDiv = document.getElementById('checkboxWrapper');

// div 要素に change イベントのリスナーを登録
wrapperDiv.addEventListener('change', (e) => {
  //イベントが発生した要素（e.target）の type 属性が checkbox であれば
  if( e.target.type === 'checkbox' ) {
    //checked プロパティが true であればチェックボックスが選択された
    if(e.target.checked === true) {
      alert('value ' + e.target.value + 'が選択されました');
    }else{
      alert('value ' + e.target.value + 'が解除されました');
    }
  }
});
</script>

<div id="checkboxWrapper">
  <input type="checkbox" name="check" value="1" id="checkbox1">
  <label for="checkbox1">value 1 </label>
  <input type="checkbox" name="check" value="2" id="checkbox2">
  <label for="checkbox2">value 2 </label>
  <input type="checkbox" name="check" value="3" id="checkbox3">
  <label for="checkbox3">value 3 </label>
</div>
<p>change event: <span id="changeEvent"></span></p>
<p>e.target: <span id="eTarget"></span></p>
<p>e.currentTarget: <span id="eCurrentTarget"></span></p>
<p>Checked Items: <span id="checkedItemsOut"></span></p>

<script>
// チェックボックスを囲む div 要素
const wrapperDiv = document.getElementById('checkboxWrapper');
// メッセージを出力する span 要素
const changeEventOut = document.getElementById('changeEvent');
// e.target の値を出力する span 要素
const eTarget = document.getElementById('eTarget');
// e.currentTarget の値を出力する span 要素
const eCurrentTarget = document.getElementById('eCurrentTarget');
// 選択されている要素の値を出力する span 要素
const checkedItemsOut = document.getElementById('checkedItemsOut');

wrapperDiv.addEventListener('change', (e) => {
  //イベントが発生した要素の type 属性が checkbox であれば
  if( e.target.type === 'checkbox' ) {
    //要素の checked プロパティを調べる
    if( e.target.checked ) {
      //checked プロパティが true の場合
      changeEventOut.textContent = e.target.value + 'が選択されました。';
    }else{
      //checked プロパティが true でない場合
      changeEventOut.textContent = e.target.value + 'が解除されました。';
    }
    //イベントの target プロパティで取得する要素の id 属性の値を出力
    eTarget.textContent = e.target.id;
    //イベントの currentTarget プロパティで取得する要素の id 属性の値を出力
    eCurrentTarget.textContent = e.currentTarget.id;
  }
  //選択されている（:checked）状態の name="check" の要素全て（NodeList）を取得
  const checkedItems = document.querySelectorAll('[name="check"]:checked');
  //選択されている全てのチェックボックスの値を格納する配列
  const checked_list = [];
  //NodeList の forEach() メソッドを使ってチェックボックスの値を配列に追加
  checkedItems.forEach((elem) => {
    checked_list.push(elem.value);
  });
  //選択された全てのチェックボックスの値を出力
  checkedItemsOut.textContent = checked_list.join(' ');
});
</script>

<input type="radio" name="color" value="blue"> Blue
<input type="radio" name="color" value="red"> Red
<input type="radio" name="color" value="green"> Green

<script>
//全ての [name="color"] の input 要素を querySelectorAll で取得
const colorRadios = document.querySelectorAll('input[name="color"]');

//for 文で各要素の value 属性の値を出力
for(let i=0; i<colorRadios.length; i++) {
  //各要素の値（value プロパティ）をコンソールに出力
  console.log( 'colorRadios[' + i + '] : ' + colorRadios[i].value);
}

//以下は出力結果
//colorRadios[0] : blue
//colorRadios[1] : red
//colorRadios[2] : green
</script>  

<div>
  <label><input type="radio" name="color" value="blue">Blue</label>
  <label><input type="radio" name="color" value="red">Red</label>
  <label><input type="radio" name="color" value="green">Green</label>
</div>
<button type="button" id="checkSelected">Check</button>

<script>
//name="color" のラジオボタンの全ての要素を取得（NodeList）
const radioButtons = document.querySelectorAll('input[name="color"]');
//id が checkSelected のボタン要素を取得
const btn = document.getElementById('checkSelected');

//ボタンに click イベントのイベントリスナーを登録
btn.addEventListener('click', () => {
  //for 文で各要素の checked プロパティを調べる
  for(let i=0; i<radioButtons.length; i++) {
    //checked プロパティが true の場合（その要素が選択されている場合）
    if(radioButtons[i].checked === true)  { // if(radioButtons[i].checked) でも同じ
      //radioButtons[i] は選択されているラジオボタンなのでその値とインデックスをアラート表示
      alert('index: ' + i + ' value: ' + radioButtons[i].value);
      //選択されたいるラジオボタンは見つかったので for 文から抜け出す
      break;
    }
  }
})
</script>

<div>
  <label><input type="radio" name="color" value="blue">Blue</label>
  <label><input type="radio" name="color" value="red">Red</label>
  <label><input type="radio" name="color" value="green">Green</label>
</div>
<button type="button" id="check">Check</button>
<button type="button" id="clear">Clear</button>
<div id="output"></div>

<script>
//name="color" のラジオボタンの全ての要素を取得（NodeList）
const radioButtons = document.querySelectorAll('input[name="color"]');
//id が check のボタン要素を取得
const check = document.getElementById('check');
//id が clear のボタン要素を取得
const clear = document.getElementById('clear');
//id が output の div 要素を取得
const output = document.getElementById('output');

//ボタンに click イベントのイベントリスナーを登録
check.addEventListener('click', () => {

  //for 文で各要素の checked プロパティを調べる
  for(let i=0; i<radioButtons.length; i++) {
    //各要素の親要素（label 要素）の文字色のインラインスタイルをリセット
    radioButtons[i].parentElement.style.color = null;
    //checked プロパティが true の場合
    if(radioButtons[i].checked === true)  { // if(radioButtons[i].checked) でも同じ
      //変数 selectedRadio に 選択されているラジオボタンを代入
      selectedRadio = radioButtons[i];
      //ラジオボタンの値を出力
      output.textContent = selectedRadio.value;
      //出力先の文字色をラジオボタンの値に設定
      output.style.color = selectedRadio.value;
      // for 文から抜け出す
      break;
    }
  }
});

//Clear ボタンに click イベントのリスナーを登録
clear.addEventListener('click', () => {
  for(let i=0; i<radioButtons.length; i++) {
    //各要素の checked プロパティに false を設定（選択を解除）
    radioButtons[i].checked = false;
  }
  //出力先のテキストを空に
  output.textContent = '';
});
</script>

<input type="radio" name="color" data-color="#555CC3" value="blue">Blue
<input type="radio" name="color" data-color="#DC5254" value="red">Red
<input type="radio" name="color" data-color="#17860F" value="green">Green

//出力先の文字色をラジオボタンの data-color 属性の値に設定
output.style.color = selectedRadio.getAttribute('data-color');

<div>
  <label><input type="radio" name="color" value="blue">Blue</label>
  <label><input type="radio" name="color" value="red">Red</label>
  <label><input type="radio" name="color" value="green">Green</label>
</div>
<button type="button" id="checkSelected">Check</button>

<script>
//id が checkSelected のボタン要素を取得
const btn = document.getElementById('checkSelected');

//ボタンに click イベントのリスナーを登録
btn.addEventListener('click', () => {
  //name="color" のラジオボタンで選択されている（:checked の）要素を取得
  const selectedRadio = document.querySelector('[name="color"]:checked');
  if(selectedRadio){
    alert('value: ' + selectedRadio.value);
  }else{
    alert('何も選択されていません');
  }
})
</script> 

<div>
  <label><input type="radio" name="color" value="blue">Blue</label>
  <label><input type="radio" name="color" value="red">Red</label>
  <label><input type="radio" name="color" value="green">Green</label>
</div>
<div>
<button type="button" id="check">Check</button>
<button type="button" id="clear">Clear</button>
</div>
<div id="output"></div>

<script>
//id が check のボタン要素を取得
const check = document.getElementById('check');
//id が clear のボタン要素を取得
const clear = document.getElementById('clear');
//id が output の div 要素を取得
const output = document.getElementById('output');

//ボタンに click イベントのイベントリスナーを登録
check.addEventListener('click', () => {
  //name="color" のラジオボタンで選択されている（:checked の）要素を取得
  const selectedRadio = document.querySelector('[name="color"]:checked');
  //selectedRadio が null でなければ（選択されているラジオボタンがあれば）
  if(selectedRadio){
    //親要素（label 要素）の文字色のインラインスタイルをリセット
    selectedRadio.parentElement.style.color = null;
    //変数 buttonValue に 選択されているラジオボタンの値を代入
    const buttonValue = selectedRadio.value;
    //ラジオボタンの値を出力
    output.textContent = buttonValue
    //出力先の文字色をラジオボタンの値に設定
    output.style.color = buttonValue;
  }
});

clear.addEventListener('click', () => {
  //name="color" のラジオボタンで選択されている（:checked の）要素を取得
  const selectedRadio = document.querySelector('[name="color"]:checked');
  //selectedRadio が null でなければ（選択されているラジオボタンがあれば）
  if(selectedRadio){
    // checked プロパティに false を設定して選択を解除
    selectedRadio.checked = false;
  }
  //出力先のテキストを空に
  output.textContent = '';
});
</script> 

<div>
  <label><input type="radio" name="color" value="blue"> Blue</label>
  <label><input type="radio" name="color" value="red"> Red</label>
  <label><input type="radio" name="color" value="green"> Green</label>
</div>

<script>
//name 属性が color の要素を querySelectorAll() で全て取得
const radios = document.querySelectorAll('[name="color"]');

//for 文で各要素に addEventListener() を設定
for(let i=0; i<radios.length; i++) {
  // change イベントのリスナーを登録
  radios[i].addEventListener('change', (e) => {
    //その要素（e.currentTarget）の checked プロパティが true であれば値（value）を表示
    if( e.currentTarget.checked ) {
      alert('選択された値 : ' + e.currentTarget.value);
    }
  });
}
</script> 

//name 属性が color の要素を querySelectorAll() で全て取得
const radios = document.querySelectorAll('[name="color"]');

//for 文で各要素に addEventListener() を設定
for(let i=0; i<radios.length; i++) {

  // change イベントのリスナーを登録
  radios[i].addEventListener('change', (e) => {
    //イベントのタイプとイベントが発生した要素の checked プロパティの値を出力
    console.log(e.type + ':' +  e.currentTarget.checked);
  });

  // input イベントのリスナーを登録
  radios[i].addEventListener('input', (e) => {
    //イベントのタイプとイベントが発生した要素の checked プロパティの値を出力
    console.log( e.type + ':' +  e.currentTarget.checked);
  });
}

/*出力例（ checked プロパティの値はいつも true ）
input:true  //input イベントが先に表示される
change:true
*/

<div>
  <label><input type="radio" name="color" value="blue">Blue</label>
  <label><input type="radio" name="color" value="red">Red</label>
  <label><input type="radio" name="color" value="green">Green</label>
</div>
<div id="output"></div>

<script>
//name="color" のラジオボタンの全ての要素を取得（NodeList）
const radioButtons = document.querySelectorAll('input[name="color"]');
//id が output の div 要素を取得
const output = document.getElementById('output');

//for 文で各要素に addEventListener() を設定
for(let i=0; i<radioButtons.length; i++) {
  // change イベントのリスナーを登録
  radioButtons[i].addEventListener('change', (e) => {
    //ラジオボタンの値を出力
    output.textContent = e.currentTarget.value;
    //出力先の文字色をラジオボタンの値に設定
    output.style.color = e.currentTarget.value;
  });
}
</script> 

for(let i=0; i<radioButtons.length; i++) {
  // change イベントのリスナーを登録
  radioButtons[i].addEventListener('change', (e) => {
    //イベントが発生した要素の checked プロパティが true であれば（必ず true）
    if(e.currentTarget.checked){   //省略可能→不要
      output.textContent = e.currentTarget.value;
      output.style.color = e.currentTarget.value;
    }
  });
}

<div id="radioWrapper">
  <label><input type="radio" name="color" value="blue">Blue</label>
  <label><input type="radio" name="color" value="red">Red</label>
  <label><input type="radio" name="color" value="green">Green</label>
</div>

<script>
//ラジオボタンを囲む div 要素
const wrapperDiv = document.getElementById('radioWrapper');

//div 要素に change イベントのリスナーを登録
wrapperDiv.addEventListener('change', (e) => {
  //イベントが発生した要素の type 属性が radio であれば
  if( e.target.type === 'radio' ) {
    //イベントが発生した要素（ラジオボタン）
    const selected = e.target;
    alert('選択されたラジオボタンの値：' + selected.value);
  }
});
</script> 

<div id="radioWrapper">
  <label><input type="radio" name="color" value="blue">Blue</label>
  <label><input type="radio" name="color" value="red">Red</label>
  <label><input type="radio" name="color" value="green">Green</label>
</div>
<div id="output"></div>

<script>
// ラジオボタンを囲む div 要素
const wrapperDiv = document.getElementById('radioWrapper');
//id が output の div 要素を取得
const output = document.getElementById('output');

wrapperDiv.addEventListener('change', (e) => {
  //イベントが発生した要素の type 属性が radio であれば
  if( e.target.type === 'radio' ) {
    //ラジオボタンの値を出力
    output.textContent = e.target.value;
    //出力先の文字色をラジオボタンの値に設定
    output.style.color = e.target.value;
  }
});
</script> 

<select name="selectBox">
  <option value="1">Foo</option>
  <option value="2">Bar</option>
  <option value="3">Baz</option>
</select>

<script>
// options プロパティを取得
const opts = document.querySelector('[name="selectBox"]').options;

//select 要素に含まれる全ての option 要素を for 文でループ
for(let i=0; i<opts.length; i++) {
  console.log(`index: ${opts[i].index}  value: ${opts[i].value}  text: ${opts[i].text}`);
}

/*
//出力結果
index: 0  value: 1  text: Foo
index: 1  value: 2  text: Bar
index: 2  value: 3  text: Baz
*/
</script>

// options プロパティを取得
const opts = document.querySelector('[name="selectBox"]').options;

//options プロパティ（HTMLOptionsCollection）のオブジェクトプロパティを for in ループで調査
for(let prop in opts){
  console.log("プロパティ: " + prop + "  値: " + opts[prop] + "\n")
}

/*
出力結果
プロパティ: 0 値: [object HTMLOptionElement]  //option 要素
プロパティ: 1 値: [object HTMLOptionElement]  //option 要素
プロパティ: 2 値: [object HTMLOptionElement]  //option 要素
プロパティ: length 値: 3  //length プロパティ
プロパティ: selectedIndex 値: 0  //selectedIndex プロパティ
プロパティ: add 値: function add() { [native code] }  //add メソッド
プロパティ: remove 値: function remove() { [native code] }  //remove メソッド
プロパティ: item 値: function item() { [native code] }  //item メソッド
プロパティ: namedItem 値: function namedItem() { [native code] } //namedItem メソッド
*/

<form name="myForm">
  <select name="mySelect">
    <option value="manhattan">Manhattan</option>
    <option value="brooklyn">Brooklyn</option>
    <option value="queens">Queens</option>
    <option value="bronx" selected>Bronx</option>
    <option value="staten">Staten Island</option>
  </select>
</form>

<script>
//name 属性が myForm の form 要素内にある name 属性が mySelect の select 要素
const selectElem = document.myForm.mySelect;

//以下でも同じこと ※ .forms は省略可能
//const selectElem = document.forms.myForm.mySelect;
//const selectElem = document.forms['myForm'].mySelect;
//const selectElem = document.forms.myForm['mySelect'];
//const selectElem = document.forms.myForm.elements['mySelect'];

//select 要素の value プロパティ（選択された項目の値）
alert(selectElem.value);   //bronx
</script> 

<div class="sample">
  <select name="mySelect">
    <option value="manhattan">Manhattan</option>
    <option value="brooklyn">Brooklyn</option>
    <option value="queens">Queens</option>
    <option value="bronx" selected>Bronx</option>
    <option value="staten">Staten Island</option>
  </select>
</div>

<script>
//name 属性が myForm の select 要素
const selectElem = document.querySelector('select[name="mySelect"]');

//getElementsByName で取得する場合（インデックスを指定）
//const selectElem = document.getElementsByName('mySelect')[0];

//select 要素の value プロパティ（選択された項目の値）
alert(selectElem.value);   //bronx
</script> 

<form name="myForm">
  <select name="mySelect">
    <option value="manhattan">Manhattan</option>
    <option value="brooklyn">Brooklyn</option>
    <option value="queens">Queens</option>
    <option value="bronx" selected>Bronx</option>
    <option value="staten">Staten Island</option>
  </select>
</form>

//select 要素を取得
const selectElem = document.myForm.mySelect;
//select 要素の options プロパティで option 要素を取得
let optionElems = selectElem.options;

// 以下でも同じ
optionElems = document.myForm.mySelect.options;

// または
optionElems = document.querySelector('select[name="mySelect"]').options;

alert(optionElems.length);  //5

const optionElems = document.querySelectorAll('select[name="mySelect"] option');

alert(optionElems.length);  //5

<form name="myForm">
  <select name="mySelect">
    <option name="mh" value="manhattan">Manhattan</option>
    <option name="bk" value="brooklyn">Brooklyn</option>
    <option name="qs" value="queens">Queens</option>
    <option name="bx" value="bronx">Bronx</option>
    <option name="si" value="staten">Staten Island</option>
  </select>
</form>

<script>
//インデックスが 0 の option 要素（selsect 要素のメソッド）
let firstOption = document.myForm.mySelect.item(0);
//以下でも同じ
firstOption = document.myForm.mySelect[0];

//以下は上記と同じこと
//options プロパティのインデックスが 0 の要素（options のメソッド）
firstOption = document.myForm.mySelect.options.item(0);
firstOption = document.myForm.mySelect.options[0];

console.log(firstOption.value); //manhattan

//name 属性が bk の option 要素
let secondOption = document.myForm.mySelect.namedItem('bk');

console.log(secondOption.value); //brooklyn
</script>

<select name="mySelect">
  <option value="foo">Foo</option>
  <option value="bar">Bar</option>
  <option value="baz">Baz</option>
</select>

<script>
//select 要素を取得
const selectElem = document.querySelector('[name="mySelect"]');
//初期状態で selected 属性が設定されていないので最初の option 要素が選択されている
console.log(selectElem.value);  //foo
console.log(selectElem.selectedIndex); //0

//selectedIndex を1に（インデックスが1の option 要素を選択状態に）
selectElem.selectedIndex = 1;
console.log(selectElem.value);  //bar
console.log(selectElem.selectedIndex); //1

//select 要素の value に値を設定（value が baz の option 要素を選択状態に）
selectElem.value = 'baz';
console.log(selectElem.value);  //baz
console.log(selectElem.selectedIndex); //2

//インデックスが0の options（最初の option 要素）の selected プロパティを true に
selectElem.options[0].selected = true;
console.log(selectElem.value);  //foo
console.log(selectElem.selectedIndex); //0
</script>

<select name="mySelect" size="3" multiple>
  <option value="foo">Foo</option>
  <option value="bar">Bar</option>
  <option value="baz">Baz</option>
</select>

<script>
//select 要素を取得
const selectElem = document.querySelector('[name="mySelect"]');
//初期状態では選択されている option 要素がないので、value プロパティは空文字列を返す
console.log(selectElem.value);  // 空
//選択されている option 要素がないので、selectedIndex プロパティは -1 を返す
console.log(selectElem.selectedIndex); // -1

//options のインデックスが0と2の selected プロパティを true に
selectElem.options[0].selected = true;
selectElem.options[2].selected = true;

//選択されているすべての option 要素の数
console.log(selectElem.selectedOptions.length); //2

//選択されているすべての option 要素の値を出力
for(let i=0; i<selectElem.selectedOptions.length; i++) {
  console.log(selectElem.selectedOptions[i].value);
  // foo baz
}

//select 要素の value プロパティは選択されている「最初」の option 要素の value の値
console.log(selectElem.value);  //foo

//selectedIndex プロパティは選択されている「最初」の option 要素のインデックスの値
console.log(selectElem.selectedIndex); //0
</script>

<div id="foo"></div>

<script>
//select 要素を生成
const selectElem = document.createElement('select');
//2つの option 要素を生成
const opt1 = document.createElement('option');
const opt2 = document.createElement('option');

//option 要素の value 属性を設定
opt1.value = "1";
//option 要素の text（テキスト）を設定
opt1.text = "Option 1";

opt2.value = "2";
opt2.text = "Option 2";

//select 要素に option 要素を追加
selectElem.add(opt1, null);  //add(opt1) でも同じ
selectElem.add(opt2, null);  //add(opt2) でも同じ

//既存の id が foo の div 要素に生成した select 要素を追加
document.getElementById('foo').appendChild(selectElem);
</script>

<div id="foo">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
</div>

let option = new Option(text, value, defaultSelected, selected);

const opt1 = new Option('Option 1', '1', true, true);

//上記は以下と同じこと
const opt1 = document.createElement("option");
opt1.text = "Option 1";
opt1.value = "1";
opt1.defaultSelected = true;
opt1.selected = true;

//以下のような option 要素が生成される
<option value="1" selected="">Option 1</option>

<select name="mySelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<script>
//select 要素を取得
const mySelect = document.querySelector('[name="mySelect"]');
//追加する option 要素を生成
const opt0 = new Option(' --- ', '', true, true);
const opt3 = new Option('Option 3', '3');

//生成した opt0 を option 要素の先頭に追加
mySelect.add(opt0, 0);
//または mySelect.add(opt0, mySelect.options[0]);

//生成した opt0 を option 要素の末尾に追加
mySelect.add(opt3);
</script>

<!-- 上記の結果 -->
<select name="mySelect">
  <option value="" selected=""> --- </option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<select name="mySelect">
  <option value="" selected=""> --- </option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<script>
//select 要素を取得
const mySelect = document.querySelector('[name="mySelect"]');
//最初の option 要素を削除
mySelect.remove(0);
//残りの option 要素の3番目を削除
mySelect.remove(2);
</script>

<!-- 上記の結果 -->
<select name="mySelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<select name="mySelect">
  <option value="">選択してください</option>
  <option value="manhattan">マンハッタン</option>
  <option value="brooklyn">ブルックリン</option>
  <option value="queens">クイーンズ</option>
  <option value="bronx">ブロンクス</option>
  <option value="staten">スタテンアイランド</option>
</select>
<p>value: <span id="valueOut"></span></p>
<p>text: <span id="textOut"></span></p>

<script>
//select 要素を取得
const selectElem = document.querySelector('select[name="mySelect"]');
//value の出力先の要素
const valueOut = document.getElementById('valueOut');
//text の出力先の要素
const textOut = document.getElementById('textOut');

selectElem.addEventListener('change', (e) => {
  //リスナーを登録した select 要素を取得
  const elem = e.currentTarget;
  //select 要素の value プロパティ（選択されている option 要素の value）
  valueOut.textContent = elem.value
  //selectedIndex を options のインデックスに指定して選択されている要素を取得
  textOut.textContent = elem.options[elem.selectedIndex].text;
  //この場合リスナーを登録した要素とイベントが発生する要素は同じ
  //console.log(e.currentTarget === e.target); //true
});
</script> 

selectElem.addEventListener('change', function() {
  valueOut.textContent = this.value
  textOut.textContent = this.options[this.selectedIndex].text;
});

<select name="mySelect" size="5" multiple>
  <option value="manhattan">マンハッタン</option>
  <option value="brooklyn">ブルックリン</option>
  <option value="queens">クイーンズ</option>
  <option value="bronx">ブロンクス</option>
  <option value="staten">スタテンアイランド</option>
</select>
<p>value: <span id="valueOut"></span></p>
<p>text: <span id="textOut"></span></p>

<script>
//select 要素を取得
const selectElem = document.querySelector('select[name="mySelect"]');
//value の出力先の要素
const valueOut = document.getElementById('valueOut');
//text の出力先の要素
const textOut = document.getElementById('textOut');

selectElem.addEventListener('change', (e) => {
  //リスナーを登録した select 要素を取得
  const elem = e.currentTarget;
  //選択された option 要素の値を格納する配列
  const selectedValues = [];
  //選択された option 要素のテキストを格納する配列
  const selectedText = [];
  //selectedOptions で選択されている option 要素を全て取得
  const selected = elem.selectedOptions;
  //選択されている option 要素の値とテキストを取得して配列に追加
  for(let i=0; i<selected.length; i++){
    selectedValues.push(selected[i].value);
    selectedText.push(selected[i].text);
  }
  //選択されている option 要素の値をスペース区切りで出力
  valueOut.textContent = selectedText.join(' ');
  //選択されている option 要素のテキストをスペース区切りで出力
  textOut.textContent = selectedValues.join(' ');
});
</script> 

selectElem.addEventListener('change', (e) => {
  const elem = e.currentTarget;
  const selectedValues = [];
  const selectedText = [];
  //options で全ての option 要素を取得
  const opts = elem.options;
  //それぞれの option 要素を調べて選択状態であれば値とテキストを取得して配列に追加
  for(let i=0; i<opts.length; i++){
    //selected が true であれば選択されている
    if(opts[i].selected) {
      selectedValues.push(opts[i].value);
      selectedText.push(opts[i].text);
    }
  }
  valueOut.textContent = selectedText.join(' ');
  textOut.textContent = selectedValues.join(' ');
});

<select name="category">
  <option disabled selected>選択してください</option>
  <option value="wine">ワイン</option>
  <option value="sake">日本酒</option>
  <option value="beer">ビール</option>
</select>
<select name="subCategory" disabled>
  <option disabled selected>種類</option>
</select>

<script>
//subCategory の select 要素に表示する項目のデータ
const subCategoryList =
      {
        "wine": ["スティル", "スパークリング", "フォーティファイド", "フレーヴァード"],
        "sake": ["純米酒", "本醸造酒", "吟醸酒"],
        "beer": ["ラガー", "エール"]
      };

//select 要素を取得
const category = document.querySelector('select[name="category"]');
const subCategory = document.querySelector('select[name="subCategory"]');

category.addEventListener('change', () => {
  //subCategory の disabled を解除
  subCategory.disabled = false;
  //subCategory の option を削除（options の length を0にして内容を削除）
  subCategory.options.length = 0;
  //subCategory の最初の option 要素を作成
  const firstOption = document.createElement('option');
  firstOption.text = '種類を選択してください';
  firstOption.defaultSelected = true;
  firstOption.disabled = true;
  //subCategory に上記で作成した option 要素を追加
  subCategory.add(firstOption);
  //category の項目（option 要素）で選択された値を取得
  const selected = category.value;
  //上記 selected をキーに指定して表示する項目のデータを取得して各値につき option 要素を生成
  subCategoryList[selected].forEach( (item) => {
    let option = document.createElement('option');
    //option 要素のテキストにデータの値を設定
    option.text = item;
    //subCategory に option 要素を追加
    subCategory.add(option);
  });
});
</script>