jQuery 和单选按钮选择

发布于 2024-11-25 16:35:05 字数 1697 浏览 5 评论 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 来选择组（又名名称））。然后，如果他们选择了错误的选项（值=“假”），则将单选按钮的边框更改为红色，并始终将正确答案的边框更改为绿色。然后禁用该组按钮。

我应该在函数定义中添加什么来完成此任务？我对 jQuery 的背景知之甚少（我之前就了解过，但被告知要使用它），但从我读到的内容来看，我认为“each”可能是正确的选择。我还被告知不要费心使用 CSS 类，只需更改边框颜色即可。我能够使用回发来完成此任务，但他们说它必须在客户端。有人可以帮忙吗？

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

原文

I have an ASP.NET page that's going to use Html controls to render a page like so (sorry, the programmatic rendering is at the office):

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

What I need to do in the ClickEvent function is use jQuery to select the group (aka Name). Then if they select the wrong choice (value="false") change the radio button's border to red, and always change the correct answer's border to green. Then disable the group of buttons.

What would I put in the function definition to accomplish this? I have very little background in jQuery (which I was upfront about, yet was told to use it) but from what I've read I think "each" might be the right way to go. I was also told not to bother using CSS classes, just to change the border color. I was able to accomplish this using postbacks but they said it had to be client side. Can anyone help?

p.s. The fact that this is ASP.NET is probably irrelevant. If you know jQuery, please feel free to post an answer.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你是暖光i 2024-12-02 16:35:05

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

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

Try this(changed the markup and script to bind the click event in an unobstrusive way):

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

Working example: http://jsfiddle.net/bJx5y/2/

回复收藏 0 原文

~没有更多了~