Home/ Questions/Q 6180399
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T00:50:17+00:00

I have an ASP.NET page that’s going to use Html controls to render a

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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