Cannot get jQuery and RadioButtonList to Work
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 w开发者_运维问答rapping 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?
The @ was deprecated/removed from attribute selectors in jQuery 1.3, so your first attept should look like this:
$(document).ready(function() {
$("#btnSubmit").click(function() {
alert($("#RadioButtonList1 input[checked]").val());
});
});
Or a bit more simplified using the :checked selector:
$(function() {
$("#btnSubmit").click(function() {
alert($("#RadioButtonList1 :checked").val());
});
});
Also, here's what I think you're after in the third attempt, just as a starting point :)
Thanks, Nick, your answer got me there ... eventually :)
Your first code
alert($("#RadioButtonList1 input[checked]").val());
wouldn't work at all, giving me 'undefined' in the alert box.
Your second code
alert($("#RadioButtonList1 :checked").val());
worked in a basic asp.net page but wouldn't work in a Master/Child page which is what I am using here. I changed it to
alert($("#<%=RadioButtonList1.ClientID %>").find("input[checked]").val());
and it works fine.
加载中,请稍侯......
精彩评论