javascript にてチェックボックス(5個中任意の個数)を選択し,ボタンをクリックした際にstyle.display = "inline"にしたところ
table内に表示はされるのですが,1つのセルにチェックボックスで選択した分の要素が表示されてしまいます。
どのようにすると一つ一つが独立したセルに表示されるのでしょうか?
ご教授お願いいたします。
環境はIE11です。
javascript
1let btn = document.getElementById("btn"); 2 btn.addEventListener("click", function() { 3 let checkEigyo = document.getElementById("checkEigyo"); 4 let checkNUmber = document.getElementById("checkNumber"); 5 let checkMeka = document.getElementById("checkMeka"); 6 let checkKatashiki = document.getElementById("checkKatashiki"); 7 let checkEng = document.getElementById("checkEng"); 8if(document.forms.checkform.checkEigyo.checked) {//checkboxのチェック有無 9 sub2.style.display = "inline-block"; 10 // alert("eigyo"); 11 }else { 12 sub2.style.display = "none"; 13 } 14 if(document.forms.checkform.checkNumber.checked) { 15 sub3.style.display = "inline-block"; 16 // alert("eigyo"); 17 }else { 18 sub3.style.display ="none"; 19 } 20 if(document.forms.checkform.checkMeka.checked) { 21 sub4.style.display = "inline"; 22 // alert("eigyo"); 23 }else { 24 sub4.style.display = "none"; 25 } 26 if(document.forms.checkform.checkKatashiki.checked) { 27 sub5.style.display = "inline"; 28 // alert("eigyo"); 29 }else { 30 sub5.style.display ="none"; 31 } 32 if(document.forms.checkform.checkEng.checked) { 33 sub6.style.display = "inline"; 34 // alert("eigyo"); 35 }else { 36 sub6.style.display = "none"; 37 } 38 }); 39 40
html
1<td><input type="checkbox" name="checkElements" value="checkEigyo" id="checkEigyo"></td> 2 <td><input type="checkbox" name="checkElements" value="checkNumber" id="checkNumber"></td> 3 <td><input type="checkbox" name="checkElements" value="checkMeka" id="checkMeka"></td> 4 <td><input type="checkbox" name="checkElements" value="checkKatashiki" id="checkKatashiki"></td> 5 <td><input type="checkbox" name="checkElements" value="checkEng" id="checkEng"></td> 6省略 7 <tr id="csvcondition"> 8 <th id="sub1">社号</th> 9 <th id="sub2">営</th> 10 <th id="sub3">登録No</th> 11 <th id="sub4">メーカー</th> 12 <th id="sub5">型式</th> 13 <th id="sub6">ENG</th> 14 </tr>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。