Radiobutton list in Jquery

I tried this but it did not do anything

$(document).ready(function() {

    $("#RadioButtonList1").click(function() {

            alert($("#RadioButtonList1").find("input[@checked]").val());

        });

    });

Instead of "input[@checked]"  try using "input:radio:checked"

I think the problem is not just the code.
I am including Jquery file
<script type="text/javascript" src="Javascripts/jquery-1[1].3.2.min.js"></script>

and when I open VS I get this Just intime debugging error msg:
An unhandledexception ( object does not support htis property or method, occurred in Typebuilder.exe.)

how can I call a Jquery function in SelectIndexchange event code behind C#
<script type="text/javascript" src="../Javascripts/jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript">

    $(document).ready(function() {
      $('#RadioButtonList1').click(function() {
          //alert($("#RadioButtonList1").find("input[@checked]").val());
           alert('good');

      });

   });
---------C#
if ((sender as System.Web.UI.WebControls.RadioButtonList).SelectedItem.Value == "1")
        {
            RadioButtonList1.Attributes.Add("onclick", "JQUERYFUNCTION???()");        
            ProjList.Items.Remove(ProjList.Items.FindByValue("1"));
           
        }

I don't know ASP.  I suggest that you request that this question be added to the ASP zone.

One thing causing a problem for you is after the code is rendered you will not have an element with ID of RadioButtonList1, since this object is running at the server.  Suggest adding a CssClass and using .Classname to refrence instead.  Otherwise you will have to use the ct100... that is added to the id post rendering.

so In Jquery:
   $(document).ready(function() {
       $('#ctl00_ContentPlaceHolder1_RadioButtonList1').click(function() {
       alert($("#ctl00_ContentPlaceHolder1_RadioButtonList1").find("input[@checked]").val());
           alert('good');
     });

   });

Please note that radiobuttonlist 1 has 2 list items.  so how do I shech in Jquery which one was clicked?
  <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True"
                        onselectedindexchanged="RadioButtonList1_SelectedIndexChanged"
                        RepeatDirection="Horizontal" Width="89px" onClick ="showSome()">
                        <asp:ListItem Value = "1">R&amp;D/TS&amp;D</asp:ListItem>
                        <asp:ListItem Value = "2">M&amp;E/Other</asp:ListItem>
                    </asp:RadioButtonList>

Also each time I edit Jquery I am getting Just in time debugging error msg:
An unhandledexception ( object does not support htis property or method, occurred in Typebuilder.exe.)

any clue?

try this.

$(document).ready(function() {
       $('#ctl00_ContentPlaceHolder1_RadioButtonList1').click(function() {
           alert($(this).val());
           alert('good');
     }); 
   });

Select allOpen in new window

not sure what that error you are getting is.  What software are you using to edit it?

This one did not return anything  - alert($(this).val());

But this is working:
 $(document).ready(function() {
    $('#ctl00_ContentPlaceHolder1_RadioButtonList1').click(function()
      {
          //alert($(this).val());

        alert($('#ctl00_ContentPlaceHolder1_RadioButtonList1').find("input:radio:checked").val());
        });
    });

and Now I need to do the same in Jquery what this javasript function is doing:  please convert it to Jquery.

function showSome() {

        var value1 = window.event.srcElement.value
               
        if (value1 == "1")
            {
            document.getElementById('ChkNoAff').style.display = 'none';
            document.getElementById('ctl00_ContentPlaceHolder1_Label8').innerHTML = "All work must be associated with a Project";
            }
            if (value1 == "2")
            {
            document.getElementById('ChkNoAff').style.display = 'block';
            document.getElementById('ctl00_ContentPlaceHolder1_Label8').innerHTML = "Select project";            
            }
       
    }

Here.

$(document).ready(function() {
    $('#ctl00_ContentPlaceHolder1_RadioButtonList1').click(function()
      {
        var value1 = $('#ctl00_ContentPlaceHolder1_RadioButtonList1').find("input:radio:checked").val();
        if(value1=="1"){
            $('#ChkNoAff').hide();
            $('#ct100_ContentPlaceHolder1_Label8').html("All work must be associated with a Project");
        }else{
            $('#ChkNoAff').show();
            $('#ct100_ContentPlaceHolder1_Label8').html("Select project");
        }
        });
    });

Select allOpen in new window

Yes the hidde and show is working, but label8 is not changing
$('#ct100_ContentPlaceHolder1_Label8').html("Select project");
also attaching the just  in time debugg error.  any idea why each time I type in something thismsg shows up. Thx.
Justintimeerr.JPG

I am using VS 2008.

Oh sorry try changing to this.  the L looked like a 1.

There must be something else within your code or corruption on your vs2008 causing the error.  My vs2008 doesnt have any issues with javascript/jquery.

$(document).ready(function() {
    $('#ctl00_ContentPlaceHolder1_RadioButtonList1').click(function()
      {
        var value1 = $('#ctl00_ContentPlaceHolder1_RadioButtonList1').find("input:radio:checked").val();
        if(value1=="1"){
            $('#ChkNoAff').hide();
            $('#ctl00_ContentPlaceHolder1_Label8').html("All work must be associated with a Project");
        }else{
            $('#ChkNoAff').show();
            $('#ctl00_ContentPlaceHolder1_Label8').html("Select project");
        }
        });
    });

Select allOpen in new window

Thanks, excellent this is working.  I have to add few more things in Jquery, example if #ChkNoAff' is checked then panels needs to be hidden.  Will post the code soon for further modifications.  

your code was working yesterday, but today its not recognizing the radiobuttonlist id, actually the id changed in source code.  This will be very unstable.  Is there any way to call thte radionbuttonlist with name, which won't change and Jquery will identify it correctly?

 $('#ctl00_ContentPlaceHolder1_RadioButtonList1').click(function()

<span id="ctl00_ContentPlaceHolder1_LabelRequestOrig" title="Please describe the problem and the goal you would like to achieve through this testing" style="background-color:White;font-weight:bold;font-style:italic;">Request Origin</span>
                </td>
                <td style="width: 871px">
                    <table id="ctl00_ContentPlaceHolder1_RadioButtonList1" border="0" style="width:89px;font-weight: 700">
		<tr>
			<td><input id="ctl00_ContentPlaceHolder1_RadioButtonList1_0" type="radio" name="ctl00$ContentPlaceHolder1$RadioButtonList1" value="1" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$RadioButtonList1$0\',\'\')', 0)" /><label for="ctl00_ContentPlaceHolder1_RadioButtonList1_0">R&D/TS&D</label></td><td><input id="ctl00_ContentPlaceHolder1_RadioButtonList1_1" type="radio" name="ctl00$ContentPlaceHolder1$RadioButtonList1" value="2" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$RadioButtonList1$1\',\'\')', 0)" /><label for="ctl00_ContentPlaceHolder1_RadioButtonList1_1">M&E/Other</label></td>
		</tr>
	</table>

Select allOpen in new window

use CssClass="className" then $('.className')   just keep this class name unique.

In this radiobuttonlist tag how do I use class?
<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True"
                        onselectedindexchanged="RadioButtonList1_SelectedIndexChanged"
                        RepeatDirection="Horizontal" Width="89px"  
                        style="font-weight: 700" onClick="showSome()" CssClass="className"??? >
                        <asp:ListItem Value ="1">R&amp;D/TS&amp;D</asp:ListItem>
                        <asp:ListItem Value ="2">M&amp;E/Other</asp:ListItem>
                    </asp:RadioButtonList>

That is correct, then you change your code to this.

$(document).ready(function() {
    $('.className').click(function()
      {
        var value1 = $('.className').find("input:radio:checked").val();
        if(value1=="1"){
            $('#ChkNoAff').hide();
            $('#ctl00_ContentPlaceHolder1_Label8').html("All work must be associated with a Project");
        }else{
            $('#ChkNoAff').show();
            $('#ctl00_ContentPlaceHolder1_Label8').html("Select project");
        }
        });
    });

Select allOpen in new window

Thx, but where do I create this class? I tried adding:
cssClass = "Rdbtn"  and it gives me error - rdbtn is not defined.  Please let me know how and where I need to create this class.

Is it just the VS error on build and green underline?  That is just a warning will not cause any issues.  If you want to get rid of it you can put a .Rdbtn{} in your css and not apply any attributes.

Yes it a green line, I don't have any css file that is defining this radiobutton list:  Does this look correct?
<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True"
                        onselectedindexchanged="RadioButtonList1_SelectedIndexChanged"
                        RepeatDirection="Horizontal" Width="89px"  
                        style="font-weight: 700" CssClass = "ClassName" >
                        <asp:ListItem Value ="1">R&amp;D/TS&amp;D</asp:ListItem>
                        <asp:ListItem Value ="2">M&amp;E/Other</asp:ListItem>
                    </asp:RadioButtonList>

Still not working.  I hav ethis in radiobuttonlist tag
<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True"
                        onselectedindexchanged="RadioButtonList1_SelectedIndexChanged"
                        RepeatDirection="Horizontal" Width="89px"  
                        style="font-weight: 700" CssClass = "ClassName" >
                        <asp:ListItem Value ="1">R&amp;D/TS&amp;D</asp:ListItem>
                        <asp:ListItem Value ="2">M&amp;E/Other</asp:ListItem>
                    </asp:RadioButtonList>
And this is Jquery:
$(document).ready(function() {
    $('.className').click(function()
      {
        var value1 = $('.className').find("input:radio:checked").val();
        if(value1=="1"){
            $('#ChkNoAff').hide();
            $('#ctl00_ContentPlaceHolder1_Label8').html("All work must be associated with a Project");
        }else{
            $('#ChkNoAff').show();
            $('#ctl00_ContentPlaceHolder1_Label8').html("Select project");
        }
        });
    });

ahh looks like radiobuttonlist didnt respond like I thought.  Try this

$(document).ready(function() {
    $('.Rdbtn input').click(function()
      {
        var value1 = $('.Rdbtn').find("input:radio:checked").val();
        if(value1=="1"){
            $('#ChkNoAff').hide();
            $('#ctl00_ContentPlaceHolder1_Label8').html("All work must be associated with a Project");
        }else{
            $('#ChkNoAff').show();
            $('#ctl00_ContentPlaceHolder1_Label8').html("Select project");
        }
        });
    });

Select allOpen in new window

I changed the CssClass to Rdbtn and also modified Jquery but it is still not recognizing the radiobuttonlist.
Why is is so difficult in Jquery to recognized it?
<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True"
                        onselectedindexchanged="RadioButtonList1_SelectedIndexChanged"
                        RepeatDirection="Horizontal" Width="89px"  
                        style="font-weight: 700"  CssClass = "Rdbtn" >
                        <asp:ListItem Value ="1">R&amp;D/TS&amp;D</asp:ListItem>
                        <asp:ListItem Value ="2">M&amp;E/Other</asp:ListItem>
                    </asp:RadioButtonList>

Attaching error msg, line 384 is  $('.Rdbtn input').click(function() {

err.JPG

since the Jquery is not working, I am trying to use my old javasript function which does the same.  I want to hide a panel if Value ==2, but its not working?
Could you please help me?
 if (value1 == "2") {
            document.getElementById('ChkNoAff').style.display = 'block';
            document.getElementById('ctl00_ContentPlaceHolder1_Label8').innerHTML = "Select project";
            document.getElementById('ctl00_ContentPlaceHolder1_PanelAccountInfo').style.display = 'block'; //Not working?
document.getElementById('PanelAccountInfo').style.display = 'block'; <--also tried this not working?
        }

and here the panel that will hide and show based on radiobuttonlist selection.
<asp:Panel ID="PanelAccountInfo" runat="server" Visible="true">
                    <div style="text-align: center">
                        <span style="font-size: medium; font-weight: bold">Input not needed</span><b></b></div>
                </asp:Panel>

Please tell me if there is any way to debug, add break point in Jquery?  

Isnt any way to do a break point.  best thing to do is add alerts that say different things.  That way you can see where it breaks by the alerts.  Can you copy and paste in the post rendered code where the radio buttons and label and #chknoaff are?

I am attaching the source code for radiobuttonlist1, lable and chkaff. Thx.

 <tr>
                <td style="width: 175px">
                
                
                    <span id="ctl00_ContentPlaceHolder1_LabelRequestOrig" title="Please describe the problem and the goal you would like to achieve through this testing" style="background-color:White;font-weight:bold;font-style:italic;">Request Origin</span>
                </td>
                <td style="width: 871px">
                    <table id="ctl00_ContentPlaceHolder1_RadioButtonList1" class="Rdbtn" border="0" style="width:89px;font-weight: 700">
		<tr>
			<td><input id="ctl00_ContentPlaceHolder1_RadioButtonList1_0" type="radio" name="ctl00$ContentPlaceHolder1$RadioButtonList1" value="1" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$RadioButtonList1$0\',\'\')', 0)" /><label for="ctl00_ContentPlaceHolder1_RadioButtonList1_0">R&D/TS&D</label></td><td><input id="ctl00_ContentPlaceHolder1_RadioButtonList1_1" type="radio" name="ctl00$ContentPlaceHolder1$RadioButtonList1" value="2" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$RadioButtonList1$1\',\'\')', 0)" /><label for="ctl00_ContentPlaceHolder1_RadioButtonList1_1">M&E/Other</label></td>
		</tr>
	</table>
                    <br />
                    <span id="ctl00_ContentPlaceHolder1_Label8" style="font-weight: 700">Select from project name list below ( or check the box "No project affiliattion available only for "M&E" alligned worked):</span>
                    <br />
                    <div id = "ChkNoAff" style="display:none"> 
                    
                    <span style="font-weight: 700"><input id="ctl00_ContentPlaceHolder1_CheckBox1" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1" /><label for="ctl00_ContentPlaceHolder1_CheckBox1">No Project Affiliation</label></span>
                    </div>
           </td>
                <td>
                    &nbsp;</td>
           </tr>

Select allOpen in new window

first off take this off of the radio button list.  AutoPostBack="True" onselectedindexchanged="RadioButtonList1_SelectedIndexChanged"

Did a functional example below, you will have to modify the topline.  Modified Label8 to use cssclass as well.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.Rdbtn input').click(function() {
                var value1 = $('.Rdbtn').find("input:radio:checked").val();
                if (value1 == "1") {
                    $('#ChkNoAff').hide();
                    $('.RdbtnLabel').html("All work must be associated with a Project");
                } else {
                    $('#ChkNoAff').show();
                    $('.RdbtnLabel').html("Select project");
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:RadioButtonList ID="RadioButtonList1" runat="server" 
                        RepeatDirection="Horizontal" Width="89px"  
                        style="font-weight: 700" CssClass="Rdbtn">
                        <asp:ListItem Value ="1">R&amp;D/TS&amp;D</asp:ListItem>
                        <asp:ListItem Value ="2">M&amp;E/Other</asp:ListItem>
                    </asp:RadioButtonList>
        <asp:Label ID="Label8" CssClass="RdbtnLabel" runat="server" Text="Select from project name list below ( or check the box &quot;No project affiliattion available only for &quot;M&E&quot; alligned worked):"></asp:Label>
        <div id = "ChkNoAff" style="display:none">        
            <span style="font-weight: 700">
                <asp:CheckBox ID="CheckBox1" runat="server"/><asp:Label ID="Label1" runat="server"
                    Text="No Project Affiliation"></asp:Label>
            </span>
        </div>
    </div>
    </form>
</body>
</html>

Select allOpen in new window

But I need the selectIndexchange.  It does the following, can this be done in Jquery as well:
If value =1 then it removes "not assigned to a project" item from Listbox, and if it empty then it shows "not assigned to Project" in a list box.  This is necessary.
 if ((sender as System.Web.UI.WebControls.RadioButtonList).SelectedItem.Value == "1")
        {
             
            ProjList.Items.Remove(ProjList.Items.FindByValue("1"));
           
        }
        else if (ProjList.Items.FindByValue("1") == null)
        {
            ProjList.Items.Insert(0, new ListItem("Not Assigned to a Project", "1"));
           
        }

This should do.  add CssClass="ProjList" to the listbox

if($('.Rdbtn').find("input:radio:checked").val()=="1"){
    $(".ProjList option[@value=1]").remove(); 
}else if ($(".ProjList option[@value=1]").val()==null){
    $(".ProjList").append("<option value='1'>Not Assigned to a Project</option>");
}

Select allOpen in new window

I did remove the autopostback = true and selectindexchage, added cssclass to label8, and tried your code and it still does not do anything.  I just added an alert inside this  $('.Rdbtn input').click(function() {}
and outside.  The outside alreart is working but the inside one does not.  Looks like its not going inside the  $('.Rdbtn input').click(function() {}

OK, so to check if Jquery is working, lets leave the radiobuttonlist alone and do something else that I also need,
if CheckBox1 is checked then PanelSearchProject should be grayed out, it is visible but disabled and grayed in color.  Please let me know if this is possible.
Thx.

if the alerts were not popping then the background color changing wont work either.   would use $('#PanelSearchProject ').css({'background' : '#DDDDDD'});  (or whatever the id of PanelSearchProject  is)

of and for sake of compatability try this.

$('.Rdbtn').find('input:radio').click(function() {}

Instead of radiobuttonlist ,  I am trying to see if checking this checkbox in Jquery will invoke panel change.
So for check box , please let me know the code, so that if chekbox1 is checked then PanelSearchProject is disabled - user cannot click in that panel.
<asp:CheckBox ID="CheckBox1" runat="server" style="font-weight: 700"
                        Text="No Project Affiliation" />
<asp:Panel ID="PanelSearchProject" runat="server" Visible="true">

Thx.

I can hide or show panel in Javascript, but is it possible to disable it in Jquery?

is this correct syntax?
if ($('#CheckBox1:checked').val() !== null) {
        alert('1');
    }

<asp:CheckBox ID="CheckBox1" runat="server" style="font-weight: 700"
                        Text="No Project Affiliation" />

no, the first issue is it should be != instead of !==.  What are you trying to get that to do?  

and on disabling the panel, technically it would be require calling the panel and setting the attribute  disabled="disabled".

$(".panelClass").attr("disabled")="disabled";  not sure that it will work though, technically it shouldn't, but that is what asp.net renders the enabled=false to.

I tried
if ($('#CheckBox1:checked').val() != null) {
        alert('1');
    }
But it does nothing.  I was checking if checkbox will work in Jquery after banging my head with radiobuttonlist.  Also in page load teh cehckbox1 is not visible.  does that block Jquery?
<div id = "ChkNoAff" style="display:none">                    
                    <asp:CheckBox ID="CheckBox1" onclick ="chkValue(this)" name = "foo" runat="server" style="font-weight: 700"
                        Text="No Project Affiliation" />
                    </div>

I am making this checkbox visible when user selects something, and then again if user selects the checkbox, then  panel id = panelSearchProject will disabled.

also tried this and it does nothing:
if ($('#ctl00_ContentPlaceHolder1_CheckBox1:checked').val() != null) {
        alert('1');
    }

as long as the checkbox exists on the page jquery will be able to use it.  it can be hidden.   Remember that asp elements will not render with the same ID you provide them with.  this chkbox will have the ID of ctl00_ContentPlaceHolder1_CheckBox1.  This is why it is easiest to use cssclass then refrence by class with these elements.

little thrown off though as to when the checkbox will not be null according to your code.

I tried it in Javascript but that does not work either:
function chkValue(cb) {
        if (cb.checked) {
            document.getElementById('ctl00_ContentPlaceHolder1_PanelSearchProject').style.display = 'none';
               } else {
        document.getElementById('ctl00_ContentPlaceHolder1_PanelSearchProject').style.display = 'block';
        }
    }

<div id = "ChkNoAff" style="display:none">
                   
                    <asp:CheckBox ID="CheckBox1" onPropertyChange="chkValue(this);" name = "foo" runat="server" style="font-weight: 700"
                        Text="No Project Affiliation" />
                    </div>

Alos tried onclick
<div id = "ChkNoAff" style="display:none">
                   
                    <asp:CheckBox ID="CheckBox1" onClick="chkValue(this);" name = "foo" runat="server" style="font-weight: 700"
                        Text="No Project Affiliation" />
                    </div>

This works.

//in the head in a script tag
$(document).ready(function() {
$('.foo input').click(function() {
                if ($(this).attr('checked')) {
                    alert("im checked");
                } else {
                    alert("im not checked");
                }
            });
}); 
//in the body
<asp:CheckBox ID="CheckBox2" CssClass = "foo" runat="server" style="font-weight: 700"
                        Text="No Project Affiliation" />

Select allOpen in new window

I wil accept this solution even thought it did not work on my machine.  The code is correct but I might have bigger problem with Jquery links with asp.net on back end in my machine. Thanks.