• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 315
  • Last Modified:

Check a CheckBox when any RadioButtonList Items are selected

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
megnin
Asked:
megnin
  • 8
  • 2
  • 2
  • +1
2 Solutions
 
surajgupthaCommented:
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
 
megninAuthor Commented:
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
 
megninAuthor Commented:
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
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
surajgupthaCommented:
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
 
megninAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
Kiran SonawaneProject LeadCommented:
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
 
megninAuthor Commented:
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
 
megninAuthor Commented:
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
 
leakim971PluritechnicianCommented:
<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
 
megninAuthor Commented:
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
 
megninAuthor Commented:
Nice!  Works like a dream.
0
 
megninAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

  • 8
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now