I'm pulling my hair out trying to get a jQuery script working that will pick up the selected value in a RadioButtonList. I've done the usual thing when I can't get a script to run - cut and paste somebody else's into a blank page, get it working and then copy into the required page.
I have tried three different scripts, however, that take different approaches to defining the selected value but I can't get any of them to work, even though comments on some of the webpages I got them from seem to suggest that they are working for other people.
This script throws an unrecognised expression error:
//In head with prior reference to local copy of jquery-1.4.1.js
<script language="javascript">
$(document).ready(function() {
$("#btnSubmit").click(function() {
alert($("#RadioButtonList1").find("input[@checked]").val());
});
});
</script>
//In body
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
</asp:RadioButtonList>
<input id="btnSubmit" type="button" value="Submit" />
In the following code, the alert box justs gives 'undefined' (Note I've tried it with both the remote reference and reference to local copy of jquery-1.4.1.js )
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Text="Yes" Value="1"></asp:ListItem>
<asp:ListItem Text="No" Value="2"></asp:ListItem>
</asp:RadioButtonList>
</div>
<input type="button" id="btnTest" value="Uncheck" />
</form>
</body>
<script type="text/javascript">
$('#btnTest').click(function () {
alert($('#<%=RadioButtonList1.ClientID %> input[type=radio]:checked').val());
});
</script>
</html>
I've also tried the following in a basic HTML page (i.e. not asp.net) and it does nothing
//In head
$("input[@name='option_layout']").change(
function()
{
if ($("input[@name='option_layout']:checked").val())
$(".group").toggleClass("group_vert");
else
$(".group").toggleClass("group_vert");
$(this).blur();
}
);
//In body
<input type="radio" name="option_layout" value="0" checked="checked" />
<input type="radio" name="option_layout" value="1" />
I've tried modifying .change to .click as I know that there is a bug in IE with .change, even though I had tested with no success in both IE and Fiefox. I also tried wrapping the code inside a $(document).ready(function() block but no difference. I've also tried adding an alert box into the first line of the function but it again throws an unrecognised expression error.
Anyone any idea what is going wrong here?