Question

我有一个ASP.NET页面，它将使用Html控件来渲染这样的页面（抱歉，程序化渲染在办公室）：

<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来选择组（又名Name）。然后，如果他们选择了错误的选择（值=“假”），将单选按钮的边框更改为红色，并始终将正确答案的边框更改为绿色。然后禁用按钮组。

我会在函数定义中添加什么来实现此目的？我在jQuery中的背景很少（我之前提到过它，但是被告知要使用它）但是根据我的阅读，我认为“每个”可能是正确的方法。我还被告知不要使用CSS类，只是为了改变边框颜色。我能够使用回发来完成这个，但他们说它必须是客户端。有人可以帮忙吗？

P.S。这是ASP.NET的事实可能无关紧要。如果您了解jQuery，请随时发布答案。

Answer 1

试试这个（更改标记和脚本以不引人注目的方式绑定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/

jQuery和单选按钮选择

1 个答案: