チェックボックスがチェックされているかどうかに応じて要素を隠す/表示しない

Question

私は2つの要素を持っており、チェックボックスがオンになっていても何も起こっていないためにそれぞれを表示/非表示にしようとしています。

誰でも知ることができますか？ありがとう

<script> 
document.getElementById('cbox').onchange = function() { 
if (document.getElementById('cbox').checked === false) { 
     document.getElementById("1").style.visibility = "hidden"; 
     document.getElementById("2").style.visibility = "visible"; 
} 
else{ 
document.getElementById("2").style.visibility = "hidden"; 
     document.getElementById("1").style.visibility = "visible"; 
} 
};​ 
</script> 



<input type="checkbox" style="-webkit-appearance:checkbox;" id="cbox"> 
<p style="color:black;">I agree</p> 

     <tr> 

<td id="1" style="background-color:#3cadd4;width:5px;"><div><a 
style="color:white;" href="#" onclick="document['Order'].submit()">PAY1 
NOW</a> </div></td> 


<td id="2" style="background-color:#3cadd4;width:5px;"><div><a 
style="color:white;" href="#" onclick="document['Order'].submit()">PAY2 
NOW</a> </div></td> 

Answer 1

あなたのHTMLにはエラーがあります。 trとtdを使用しますが、tableは使用しません。これらの要素はテーブル内にある必要があります。あなたのHTMLを修正して、すべてが正常に動作し ：

document.getElementById('cbox').onchange = function() { 
 
    if (document.getElementById('cbox').checked === false) { 
 
    document.getElementById("1").style.visibility = "hidden"; 
 
    document.getElementById("2").style.visibility = "visible"; 
 
    } 
 
    else{ 
 
    document.getElementById("2").style.visibility = "hidden"; 
 
    document.getElementById("1").style.visibility = "visible"; 
 
    } 
 
}

<input type="checkbox" style="-webkit-appearance:checkbox;" id="cbox"> 
 
<p style="color:black;">I agree</p> 
 
<table> 
 

 
     <tr> 
 

 
<td id="1" style="background-color:#3cadd4;width:5px;"><div><a 
 
style="color:white;" href="#" onclick="document['Order'].submit()">PAY1 
 
NOW</a> </div></td> 
 

 

 
<td id="2" style="background-color:#3cadd4;width:5px;"><div><a 
 
style="color:white;" href="#" onclick="document['Order'].submit()">PAY2 
 
NOW</a> </div></td> 
 
</tr> 
 
</table>

jsfiddle：https://jsfiddle.net/grkuLznv/

Answer 2

使用のdivないTD 、TRとちょうどテーブル内のtd使用

<table> 
    <tr> 
     <td> 
     </td> 
    </tr> 
</table> 

---

<div id="1" style="background-color:#3cadd4;width:5px;"><div><a 
    style="color:white;" href="#" onclick="document['Order'].submit()">PAY1 
    NOW</a> </div></div> 

私のコードを参照してください。https://codepen.io/miladfm/pen/XRwmvw

Answer 3

JavaScriptが 'onloadイベント' ハンドラか何かではないので、スクリプトは 'CBOX' ID 'を知って' いません。あなたのJSコードを文書の最後に置いてください。それはうまくいくでしょう。