Bootstrap4 トグルスイッチの値をaddEventListener clickで取得する →うまくいかない。→解決

5519 ワード
bootstrap4 JavaScript JavaScript テキストリンク

会社の受付フォームを趣味でごりごり作成しております。図のようにトグルスイッチを用いて「溶接区分」の「半自動溶接のボタン」を押すと、「addEventListener 'click'」でイベントを発火させ、種目funcで「溶接区分」の「半自動溶接(id_wc_0.checked)」、「ステンレス鋼溶接(id_wc_1.checked)」、「手溶接（アーク）(id_wc_2.checked)」の押されたのを取得して、処理するようなプログラムを作成したいのですが、「溶接区分」の「半自動溶接(id_wc_0.checked)」をクリックしても「if==id_wc_1.checked」が「True」に変わらず「False」のままです。。。もう一度クリックすると、「if==id_wc_1.checked」 が「True」に変わります。どなた様かご教授お願いいたします。ちなみに「addEventListener 'click'」を「addEventListener 'change'」にするとイベントも発火しませんでした。

form.html
<td>
 <div id="溶接区分" class="btn-group btn-group-toggle" 
data-toggle="buttons">
  <label class=" btn btn-primary"><label for="id_wc_0"> 
  <input type="radio" name="wc" value="1" id="id_wc_0">
 半自動溶接</label></label>               
  <label class=" btn btn-primary"><label for="id_wc_1"> 
  <input type="radio" name="wc" value="2" id="id_wc_1">
 ステンレス鋼溶接</label></label>                
  <label class=" btn btn-primary"><label for="id_wc_2"> 
  <input type="radio" name="wc" value="3" id="id_wc_2">
 手溶接(ア－ク)</label></label>                
</div>
</td>
main.js
document.getElementById('溶接区分').addEventListener('click', 種目func, false);


function 種目func() {
console.log(id_wc_0.checked);
console.log(id_wc_1.checked);
console.log(id_wc_2.checked);
if (id_wc_0.checked == true) {          //半自動溶接
//（コード）
}else if (id_wc_1.checked == true) {    //ステンレス鋼溶接
//（コード）
} else if (id_wc_2.checked == true) {   //手溶接
//（コード）
}