0

我有一个 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 选择组（又名名称）。然后，如果他们选择了错误的选项（value="false"），则将单选按钮的边框更改为红色，并始终将正确答案的边框更改为绿色。然后禁用该组按钮。

我将在函数定义中添加什么来完成此操作？我在 jQuery 方面的背景很少（我很早就知道了，但被告知要使用它），但从我读过的内容来看，我认为“每个”可能是正确的方法。我还被告知不要打扰使用 CSS 类，只是为了更改边框颜色。我能够使用回发来完成此任务，但他们说它必须是客户端。任何人都可以帮忙吗？

ps 这是 ASP.NET 的事实可能无关紧要。如果您知道 jQuery，请随时发布答案。

4

1 回答 1

0

试试这个（更改标记和脚本以不显眼的方式绑定点击事件）：

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

于 2011-07-21T23:32:26.087 回答