jQuery和单选按钮选择

我有这回事使用HTML控件来呈现像这样一个网页（对不起，程序化渲染是在办公室）的ASP.NET页面：jQuery和单选按钮选择

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

我会在函数定义中做什么来完成这个任务？我对jQuery的背景知之甚少（但我被告知要使用它），但从我读过的内容来看，我认为“每个”都可能是正确的选择。我也被告知不要使用CSS类，只是为了改变边框颜色。我能够使用回发功能完成此操作，但他们表示它必须是客户端。谁能帮忙？

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

来源

2011-07-21 Richard Porinn

试试这个（改变的标记和脚本click事件在unobstrusive方式绑定）：

<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-21 23:32:26 Chandu

我不能感谢你才好！如果最初的选择是真的，我添加了一个基于你的代码的else语句，但是如果没有你的例子，我不可能完成它。再次感谢！ –

jQuery和单选按钮选择

回答

相关问题