jQuery和单选按钮选择
jQuery和单选按钮选择
提问于 2011-07-22 07:17:35
我有一个ASP.NET页面，它将使用超文本标记语言控件来呈现这样的页面(对不起，编程呈现是在办公室进行的)：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery Radio Buttons</title>
</head>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<body>
<form id="form1" runat="server">
<div>
Group 1<br />
<input type="radio" name="Q1" id="rb1" title="Choice 1" value="false" onclick="javascript:ClickEvent(this);" /><br />
<input type="radio" name="Q1" id="rb2" title="Choice 2" value="true" onclick="javascript:ClickEvent(this);" /><br />
<input type="radio" name="Q1" id="rb3" title="Choice 3" value="false" onclick="javascript:ClickEvent(this);" /><br />
Group 2<br />
<input type="radio" name="Q2" id="rb4" title="Choice 1" value="false" onclick="javascript:ClickEvent(this);" /><br />
<input type="radio" name="Q2" id="rb5" title="Choice 2" value="false" onclick="javascript:ClickEvent(this);" /><br />
<input type="radio" name="Q2" id="rb6" title="Choice 3" value="true" onclick="javascript:ClickEvent(this);" /><br />
</div>
</form>
</body>
</html>
<script type="text/javascript">
function ClickEvent(r) {
}
</script>我需要在ClickEvent函数中做的是使用jQuery选择组(也就是名称)。然后，如果他们选择了错误的选择(value="false")，将单选按钮的边框更改为红色，并始终将正确答案的边框更改为绿色。然后禁用这组按钮。
为了实现这一点，我应该在函数定义中加入什么呢？我几乎没有jQuery的背景(我坦率地说过，但有人告诉我要使用它)，但从我读到的内容来看，我认为“每个”可能是正确的方式。我还被告知不必费心使用CSS类，只需更改边框颜色即可。我可以使用回发来实现这一点，但他们说必须是客户端。有人能帮上忙吗？
附注：这是ASP.NET的事实可能是无关紧要的。如果你知道jQuery，请随时张贴答案。
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-07-22 07:32:26
尝试一下(更改标记和脚本，以一种简单的方式绑定click事件)：
<div>
Group 1<br />
<input type="radio" name="Q1" id="rb1" title="Choice 1" value="false" /><br />
<input type="radio" name="Q1" id="rb2" title="Choice 2" value="true" /><br />
<input type="radio" name="Q1" id="rb3" title="Choice 3" value="false" /><br />
Group 2<br />
<input type="radio" name="Q2" id="rb4" title="Choice 1" value="false" /><br />
<input type="radio" name="Q2" id="rb5" title="Choice 2" value="false" /><br />
<input type="radio" name="Q2" id="rb6" title="Choice 3" value="true" /><br />
</div>
<script type="text/javascript">
$(function(){
$("div :radio").click(ClickEvent);
});
function ClickEvent(){
var el = this;
var $el = $(el);
if($el.val() == "false"){
var all = $("[name='" + $el.attr("name") + "']");
var correctRadio = all.filter("[value='true']");
correctRadio.wrap("<span style='border: solid Green 2px'></span>");
$el.wrap("<span style='border: solid Red 2px'></span>");
all.prop("disabled", true);
}
}
</script> 工作示例：http://jsfiddle.net/bJx5y/2/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6783990
复制相关文章
相似问题
腾讯云开发者
