隱藏/顯示元素取決於如果複選框選中不工作

我有兩個元素，並試圖使每個都可見/不可見取決於如果複選框被選中，但沒有發生。隱藏/顯示元素取決於如果複選框選中不工作

任何人都可以找出原因嗎？謝謝

<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>

來源

2017-05-27 Bradley Jo

'id'不能以數字開頭。試着改變它。 – yuriy636

仍然沒有任何反應 –

請使用jsfiddle.net – naltamur

您的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/

來源

2017-05-27 19:29:37 quirimmo

請確保您的HTML是正確的。正如我在上面展示的那樣，這段代碼工作正常，否則用完整的代碼更新答案 – quirimmo

使用格沒有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

來源

2017-05-27 19:32:36 miladfm

因爲JavaScript是不是在 'onload事件' 處理什麼的，劇本不 '知道' 的 'CBOX' 的ID。只需將您的JS代碼放在文檔的末尾，就可以了。

來源

2017-05-27 20:12:36

隱藏/顯示元素取決於如果複選框選中不工作

回答

相關問題