Question

我有两个元素，我试图让每个元素都可见/不可见，具体取决于是否选中了复选框，但没有发生任何事情。

任何人都可以找出原因吗？感谢

<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 ，td只在表中使用tr

<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不在＆＃39; onload＆＃39;处理程序或其他东西，脚本不知道＆＃39; ＆＃39; cbox＆＃39; ID。只需将您的JS代码放在文档的末尾即可。

隐藏/显示元素取决于复选框是否检查不起作用

3 个答案: