Question

我试图在选择另一个单选按钮时取消选择单选按钮。以下是我的代码

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

目标：制作＆＃34;您好＆＃34;按钮取消选择＆＃34;消失＆＃34;选择radiobutton。

然而，当我在我的jsp页面上尝试它时，＆＃34; Hello＆＃34; radiobutton不会被取消选择，但它适用于Jsfiddle。

旁注：如果我尝试包含jquery库在profileTab.jsp中，它可以工作，但我的页面布局和字体会搞砸。

知道怎么解决吗？谢谢

Answer 1

由于你动态地在html中加载了jsp，你的javascript可能会在页面加载完成之前尝试绑定。因此，事件不会触发，因为它们没有正确绑定。

如果你正在使用jquery，那么你想把eventlisteners放在jquery“document ready”函数中：

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

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

Jquery - 取消选择单选按钮不起作用

1 个答案: