为什么IE8无法为已检查的无线电选项解析我的JQuery选择器？ [英] Why does IE8 fail to resolve my JQuery selector for a checked radio option?
问题描述
以下行在Firefox中按预期工作，但IE返回'undefined'。
This following line works as expected in Firefox but IE returns 'undefined'.
var selectedChoice = $("input[name='my.test[0].SelectedOption']:checked", '#myForm').val();
这是一个可以运行的独立样本......
Here is a standalone sample that you can run...
注意问题似乎是在无线电元素的名称中使用'。'和'[]'。然而，这就是ASP.NET MVC呈现它们的方式。这是一个在Firefox中运行良好但在IE中失败的示例。
Note the problem seems to be the use of '.' and '[]' in the name of the radio element. However this is how ASP.NET MVC renders them. Here is an example which works fine in Firefox but fails in IE.
<html>
<head>
<title>Testing radio selection jquery in IE 8</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
<form id="myForm">
<input name="selected.Option[0]" id="selected_Option1" type="radio" value="1" checked="checked" />
<label for="selected_Option1">Option 1</label>
<br />
<input name="selected.Option1" id="selected_Option2" type="radio" value="2" checked="checked" />
<label for="selected_Option2">Option 2</label>
<br />
<input name="selectedOption[2]" id="selected_Option3" type="radio" value="3" checked="checked" />
<label for="selected_Option3">Option 3</label>
<br />
<input name="selectedOption3" id="selected_Option4" type="radio" value="4" checked="checked" />
<label for="selected_Option4">Option 4</label>
<br />
<span id="displaySelectedChoice1">No value selected.</span>
<br />
<span id="displaySelectedChoice2">No value selected.</span>
<br />
<span id="displaySelectedChoice3">No value selected.</span>
<br />
<span id="displaySelectedChoice4">No value selected.</span>
</form>
<script language="javascript" type="text/javascript">
var selectedChoice = $("input[name='selected.Option[0]']:checked").val();
$('#displaySelectedChoice1').html('You have selected: ' + selectedChoice);
var selectedChoice = $("input[name='selected.Option1']:checked").val();
$('#displaySelectedChoice2').html('You have selected: ' + selectedChoice);
var selectedChoice = $("input[name='selectedOption[2]']:checked").val();
$('#displaySelectedChoice3').html('You have selected: ' + selectedChoice);
var selectedChoice = $("input[name='selectedOption3']:checked").val();
$('#displaySelectedChoice4').html('You have selected: ' + selectedChoice);
</script>
</body>
</html>
请注意，第2个，第3个和第4个全部工作但第1个返回IE的未定义。它是唯一同时包含'。'和'[]'的。
Notice that the 2nd, 3rd and 4th all work but the 1st returns 'undefined' for IE. Its the only one with both '.' and '[]'.
谢谢
推荐答案
尝试逃避选择器中的方括号，我不认为IE太喜欢它们了。此外，您忘记关闭属性选择器。
Try to escape the square braces in the selector, I don't think IE likes 'em too much. Also, you forgot to close the attribute selector.
var selectedChoice = $('input[name="my.test[0].SelectedOption"]:checked', '#myForm').val();
或者使用转义的方括号和句点：
Or with escaped square braces and periods:
var selectedChoice = $('input[name="my\\.test\\[0\\]\\.SelectedOption"]:checked', '#myForm').val();
是的，有2个反斜杠。
这篇关于为什么IE8无法为已检查的无线电选项解析我的JQuery选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
