?
Solved

Check a CheckBox when any RadioButtonList Items are selected

Posted on 2011-10-10
13
Medium Priority
?
311 Views
Last Modified: 2012-05-12
Hi Experts,

I've a CheckBox and a RadioButtonList on an .aspx page and would like to "Check" the CheckBox if any of the RadioButtonList Items are selected.  I've tried several versions of this and can't get it to work.  Obviously I don't know JavaScript very well. ;-)

.aspx
<asp:CheckBox ID="SeeSuccessCoach" runat="server" Text="To see my Success Coach -" />
<asp:RadioButtonList ID="radCaseManager" runat="server" RepeatDirection="Horizontal"
    RepeatLayout="Flow" Font-Size="Smaller" Onclick="SetSeeCoach('SeeSuccessCoach');">
    <asp:ListItem Value="SNAP" Text="SNAP" />
    <asp:ListItem Value="WIA" Text="WIA" />
    <asp:ListItem Value="WTP" Text="WTP" />
    <asp:ListItem Value="REA" Text="REA" />
    <asp:ListItem Value="TTW" Text="Ticket-to-Work or" />
    <asp:ListItem Value="Vet" Text="Veteran" />
</asp:RadioButtonList>

Open in new window

.js
    function SetSeeCoach(QuestionID) {
        var rad = QuestionID
        var ckBox = document.getElementById(rad);
        ckBox.Checked = true
    }

Open in new window

.aspx.vb
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
radCaseManager.Attributes.Add("onclick", "SetSeeCoach();")
    End Sub

Open in new window


Help greatly appreciated.  Thanks.

Oh, clearing/unselecting the RadioButtonList Item if the CheckBox is unchecked would be a big plus.
Thanks!
0
Comment
Question by:megnin
  • 8
  • 2
  • 2
  • +1
13 Comments
 
LVL 21

Expert Comment

by:surajguptha
ID: 36944511
After ASP .net renders the page look at the source code of the HTML generated to see if the radcasemanager has the onclick event in the generated HTML code.

Try to move the event call to the individual radio buttons than on the list itself.

 
0
 
LVL 1

Author Comment

by:megnin
ID: 36944646
Oh, that makes sense...
Hmmm, the <span> around the individual inputs buttons has the Onclick...

<input id="SeeSuccessCoach" type="checkbox" name="SeeSuccessCoach" /><label for="SeeSuccessCoach">To see my Success Coach -</label>

<span id="radCaseManager" Onclick="SetSeeCoach(&#39;SeeSuccessCoach&#39;);" style="font-size:Smaller;">
  <input id="radCaseManager_0" type="radio" name="radCaseManager" value="SNAP" />
  <label for="radCaseManager_0">SNAP</label>
  <input id="radCaseManager_1" type="radio" name="radCaseManager" value="WIA" />
  <label for="radCaseManager_1">WIA</label>
  <input id="radCaseManager_2" type="radio" name="radCaseManager" value="WTP" />
  <label for="radCaseManager_2">WTP</label>
  <input id="radCaseManager_3" type="radio" name="radCaseManager" value="REA" />
  <label for="radCaseManager_3">REA</label>
  <input id="radCaseManager_4" type="radio" name="radCaseManager" value="TTW" />
  <label for="radCaseManager_4">Ticket-to-Work or</label>
  <input id="radCaseManager_5" type="radio" name="radCaseManager" value="Vet" />
  <label for="radCaseManager_5">Veteran</label>
</span>

Open in new window

0
 
LVL 1

Author Comment

by:megnin
ID: 36944944
Okay, I understand what's supposed to happen, I just don't know how to do it.
I tried this with no luck.
I got this from another function and modified it a bit.
   
function SetSeeCoach(QuestionID, TargetID) {
        var rad = QuestionID
        var target = document.getElementById(TargetID);
        var rbl = document.getElementById(rad);  //  The whole RadioButtonList Control
        var rbl_1 = document.getElementById(rad + '_1');  //  "Item 2"
        if (rbl_1.checked) {
            target.Checked = true
        } else {
            target.Checked = false
        }
    }

Open in new window

I also changed the markup to
Onclick="SetSeeCoach(this.id, 'SeeSuccessCoach');"

Open in new window


No luck.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 21

Expert Comment

by:surajguptha
ID: 36944990
Why is there a asp:ListItem inside the radio button list? Shouldnt there just be Asp:radiobutton and give it a name? That way you dont have to do the whole "rad_1,+" dynamic name change thing?
0
 
LVL 1

Author Comment

by:megnin
ID: 36945070
I'm not sure I understand what you mean by, "Why is there a asp:ListItem inside the radio button list".  As far as I know you have to have a ListItem for each button in an ASP.NET RadioButtonList.
<asp:RadioButtonList ID="Example_Yes_No" Runat="Server">
   <asp:ListItem>Yes</asp:ListItem>
   <asp:ListItem>No</asp:ListItem>
</asp:RadioButtonList>

Open in new window

0
 
LVL 83

Accepted Solution

by:
leakim971 earned 1600 total points
ID: 36946475
You may use :
<script language="javascript" type="text/javascript">
    window.onload = function () {
        var rbs = document.getElementById("<%= radCaseManager.ClientID %>").getElementsByTagName("input");
        for (var i = 0; i < rbs.length; i++) {
            rbs[i].onclick = function () {
                document.getElementById("<%= SeeSuccessCoach.ClientID %>").checked = true;
                return false;
            }
        }
    }
</script>

Open in new window


test page :
<%@ Page Title="Page d'accueil" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script language="javascript" type="text/javascript">
    window.onload = function () {
        var rbs = document.getElementById("<%= radCaseManager.ClientID %>").getElementsByTagName("input");
        for (var i = 0; i < rbs.length; i++) {
            rbs[i].onclick = function () {
                document.getElementById("<%= SeeSuccessCoach.ClientID %>").checked = true;
                return false;
            }
        }
    }
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:CheckBox ID="SeeSuccessCoach" runat="server" Text="To see my Success Coach -" />
<asp:RadioButtonList ID="radCaseManager" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" Font-Size="Smaller" Onclick="SetSeeCoach('SeeSuccessCoach');">
    <asp:ListItem Value="SNAP" Text="SNAP" />
    <asp:ListItem Value="WIA" Text="WIA" />
    <asp:ListItem Value="WTP" Text="WTP" />
    <asp:ListItem Value="REA" Text="REA" />
    <asp:ListItem Value="TTW" Text="Ticket-to-Work or" />
    <asp:ListItem Value="Vet" Text="Veteran" />
</asp:RadioButtonList>
</asp:Content>

Open in new window

0
 
LVL 17

Assisted Solution

by:sonawanekiran
sonawanekiran earned 400 total points
ID: 36946709
Just add below code in head tag of your aspx page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
     <script type="text/javascript">
          $(document).ready(function() {
            $("input[id*=radCaseManager]").click(function(){
               $("input[id*=SeeSuccessCoach]").attr("checked",true);
            });
          })
     </script>

Open in new window

0
 
LVL 1

Author Comment

by:megnin
ID: 36948916
sonawanekiran, would it be easy to make clearing the check box clear any RadioButtonList Item that had been selected?  
The jQuery above did check the box just fine.

I want to also check leakim971's solution.  
0
 
LVL 1

Author Comment

by:megnin
ID: 36949149
leakim971, I put your script at the bottom of my page and modified it slightly.  Window.onload has not worked for me reliably in the past so I gave the function a name and put it at the bottom of the page.  It seems to work just fine now.  Do you have a simple script to clear the RBL items if the CheckBox is cleared?
<script type="text/javascript">
        function SetSeeCoach() {
            var rbs = document.getElementById("radCaseManager").getElementsByTagName("input");
            for (var i = 0; i < rbs.length; i++) {
                rbs[i].onclick = function () {
                    document.getElementById("SeeSuccessCoach").checked = true;
                    /*return false;*/
                }
            }
        }
</script>

Open in new window

Thanks.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 36949178
<script type="text/javascript">
        function SetSeeCoach() {
            var rbs = document.getElementById("radCaseManager").getElementsByTagName("input");
            for (var i = 0; i < rbs.length; i++) {
                rbs[i].onclick = function () {
                    document.getElementById("SeeSuccessCoach").checked = true;
                    /*return false;*/
                }
            }
document.getElementById("<%= SeeSuccessCoach.ClientID %>").onclick = function() {
     if(!this.checked) {
            var rbs = document.getElementById("radCaseManager").getElementsByTagName("input");
            for (var i = 0; i < rbs.length; i++) {
                rbs[i].checked = false;
            }
     }
}
        }
</script>

Open in new window

0
 
LVL 1

Author Comment

by:megnin
ID: 36949251
Oh, hi.  I just 'repurposed' part of your script like this and it does work, but looking at the one you just posted, your's looks much better.  I did say I don't know JavaScript very well.  ;-)  I'm going to replace what I did with yours.  Thank you for that.

function ClearRBL() {
            if (document.getElementById("SeeSuccessCoach").checked == false) {
                var rbs = document.getElementById("radCaseManager").getElementsByTagName("input");
                for (var i = 0; i < rbs.length; i++) {
                    rbs[i].checked = false
                }
            }
        }

Open in new window

0
 
LVL 1

Author Comment

by:megnin
ID: 36949298
Nice!  Works like a dream.
0
 
LVL 1

Author Closing Comment

by:megnin
ID: 36949353
Thanks a lot.  Both solutions worked, but I'm using the one that included the additional functionality of clearing the RBL since that makes it really do everything it should on the form.
Thank you both very much!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month14 days, 7 hours left to enroll

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question