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，它的作品，但后来我的页面布局和字体将被搞砸了。

任何想法如何解决它？谢谢

顺便说一句：为什么不使用复选框而不是收音机打招呼？ – charsi

答

因为你有jsp在html中动态加载，所以你的javascript可能会在页面加载完成之前尝试绑定。正因为如此，这些事件不会因为没有正确绑定而被解雇。

如果你使用jQuery，那么你会希望把事件监听器在jQuery的“文件准备好”功能：

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

这可以确保页面运行的JavaScript之前完全加载。

其他代码正在工作，所以'文档准备好'在这里不是问题。 –

这将是最简单的原因，jsfiddle使用静态html和他的网站使用jsp没有。 – Jecoms

Jquery - 取消选择单选按钮不工作

相关推荐