Jquery - 取消選擇單選按鈕不工作

我試圖取消選擇一個單選按鈕，每當另一個單選按鈕被選中。下面是我的代碼Jquery - 取消選擇單選按鈕不工作

的Page1.jsp

<head> 
<title>Page 1</title> 
<%@include file="../commons/styles.jsp"%> 
</head>

的styles.jsp包含jQuery腳本

<script src="../assets/plugins/jquery/jquery-2.1.4.min.js"></script>

/*一些其他的代碼*/

<div class="contentTab"> 
    <jsp:include page="profileTab.jsp"> 
    <jsp:param name="type" value="R"/> 
    <jsp:param name="role" value="<%=role%>"/> 
</jsp:include> 
</div>

profileTab.jsp

<input type="radio" id="main1" name="main" />Disappear 
<input type="radio" id="main2" name="main" />Appear 
<div id="subCheckButtons" style="opacity:0;"> 
    <input type="radio" id="sub1" name="sub" class="subCheck" />Hello 
</div> 

<script type="text/javascript"> 
document.getElementById("main2").addEventListener("click", function() 
{ 
    document.getElementById("subCheckButtons").style.opacity = 1; 
}, false); 
document.getElementById("main1").addEventListener("click", function() 
{ 
    document.getElementById("subCheckButtons").style.opacity = 0; 
    document.getElementById("sub1").checked = false; 
}, false); 
</script>

工作的jsfiddle：http://jsfiddle.net/FRFdk/390/

目的：每當「消失」選擇單選按鈕爲了讓「你好」按鈕取消。

但是，當我在我的jsp頁面上試用它時，「Hello」單選按鈕不會取消選中，但它可以在Jsfiddle上工作。

側面說明：如果我想包括jQuery庫到profileTab.jsp，它的作品，但後來我的頁面佈局和字體將被搞砸了。

任何想法如何解決它？謝謝

來源

2016-08-13 user1730935

順便說一句：爲什麼不使用複選框而不是收音機打招呼？ – charsi

因爲你有jsp在html中動態加載，所以你的javascript可能會在頁面加載完成之前嘗試綁定。正因爲如此，這些事件不會因爲沒有正確綁定而被解僱。

如果你使用jQuery，那麼你會希望把事件監聽器在jQuery的「文件準備好」功能：

$(function() { 
    // code here... 
});

這可以確保頁面運行的JavaScript之前完全加載。

來源

2016-08-13 16:56:41 Jecoms

其他代碼正在工作，所以'文檔準備好'在這裏不是問題。 –

這將是最簡單的原因，jsfiddle使用靜態html和他的網站使用jsp沒有。 – Jecoms

Jquery - 取消選擇單選按鈕不工作

回答

相關問題