为什么 IE8 无法为选中的单选选项解析我的 JQuery 选择器？答案

【问题标题】：Why does IE8 fail to resolve my JQuery selector for a checked radio option?为什么 IE8 无法为选中的单选选项解析我的 JQuery 选择器？
【发布时间】：2014-03-14 23:57:39
【问题描述】：

以下行在 Firefox 中按预期工作，但 IE 返回“未定义”。

var selectedChoice = $("input[name='my.test[0].SelectedOption']:checked", '#myForm').val();

这是一个可以运行的独立示例...

请注意，问题似乎是使用 '.'和单选元素名称中的“[]”。然而，这就是 ASP.NET MVC 呈现它们的方式。这是一个在 Firefox 中运行良好但在 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 的“未定义”。它是唯一一个同时带有“。”的。和'[]'。

谢谢

【问题讨论】：

我认为 IE 不喜欢选择器中的方括号。也许你可以尝试逃避它们。
@Rocket 很确定你适合这个。关心发布一个 1 行答案，显示如何逃避角色，我会给你答案？谢谢！
用两个反斜杠转义两个方括号 `\\`
我用更有针对性的例子更新了描述。

标签： javascript jquery internet-explorer-8 radio-button

【解决方案1】：

尽量避开选择器中的方括号，我认为 IE 不太喜欢它们。另外，您忘记关闭属性选择器了。

var selectedChoice = $('input[name="my.test[0].SelectedOption"]:checked', '#myForm').val();

或者使用转义的方括号和句点：

var selectedChoice = $('input[name="my\\.test\\[0\\]\\.SelectedOption"]:checked', '#myForm').val();

是的，有 2 个反斜杠。

【讨论】：

试图用双反斜杠转义是行不通的。 Firefox 给了我一个“未定义的输入”，而 IE 无法正常工作。其他建议？你的def看着正确的想法。如果我将我的变量重命名为没有 [ 括号，它在 IE 和 Firefox 中都可以使用。
@Justin：我不确定，IE（以及 ASP.NET）有时只是愚蠢的。
哈哈非常真实。它实际上可能是“。”不是'['
@Justin 尝试转义 '.'然后：-P
查看我在哪里发布的新示例。和 [] 独立工作，但不能一起使用......愚蠢的 IE！无论如何，我发现逃避每个“。”和 '[' 和 ']' 与 \\ 在 IE8 和 Firefox 中工作！测试IE7的时间

【解决方案2】：

我认为这会奏效：

var selectedChoice = 
    $('input[name="my.test[0].SelectedOption"]:checked', '#myForm').val();

更新：

用这个替换你的 JS：

var $radio = $('input[name="my\\.test\\[0\\]\\.SelectedOption"]');

$radio.change(function() {

    $("#displaySelectedChoice")
        .html("You have selected: " + $radio.filter(":checked").val());  

});

See working jsFiddle demo

【讨论】：

对不起，我给了@Mark B 的相同回复。我为使问题更清楚而进行的编辑添加了一个错误。我已经修正了报价。问题是 def IE 不喜欢方括号。
顺便说一句...我确实测试了 \\ 理论，它适用于 IE7 和 IE8。
没问题我的男人！我学到了一些关于 IE7 的新东西。太奇怪了，你可以使用 .或 [] 单独，但不在一起。谁会敲门？

【解决方案3】：

您的选择测试是无效的 javascript：

var selectedChoice = $('input[name='my.test[0].SelectedOption:checked', '#myForm').val();
                                   ^--embeded quote breaks the string

这应该会更好：

var selectedChoice = $("input[name='my.test[0].SelectedOption']:checked", '#myForm').val();

请注意，:checked 部分不在 name= 部分中

【讨论】：

抱歉，我刚刚编辑了问题以添加引用。不幸的是，我很快就完成了，实际上我已经有了你已经展示的它们。问题肯定是 '[' 和 ']' 字符。但我还不确定如何逃脱它们。

【解决方案4】：

我认为您需要在选择器中转义那些 []：

var selectedChoice = $("input[name='my.test\\[0\\].SelectedOption']:checked", '#myForm').val();

http://api.jquery.com/category/selectors/

在顶部有一个关于转义的整段。

【讨论】：

【解决方案5】：

我发现您的代码非常复杂。试试这样的：

<form id="myForm">
      <input name="my.test[0].SelectedOption" class="test" type="radio" value="1"/>
      <label for="my_test_0__SelectedOption_1">Option 1</label>
      <br />

      <input name="my.test[0].SelectedOption" class="test" type="radio" value="2"/>
      <label for="my_test_0__SelectedOption_1">Option 2</label>
      <br />

      <input name="my.test[0].SelectedOption" class="test" type="radio" value="3"/>
      <label for="my_test_0__SelectedOption_1">Option 3</label>
      <br />
      <span id="displaySelectedChoice">No value selected.</span>
  </form>

  <script language="javascript" type="text/javascript">
     $(".test").change(
       function () {
         var value = $(this).val();
         $("#displaySelectedChoice").replaceTo("you choose: "+value)
       }
     )
  </script>

【讨论】：

我的例子是一个更大的应用程序的 sn-p。我的真实代码实际上检查该值是否与动态提供的值匹配，然后完全隐藏或显示另一个元素。正如Rocket所说，这里需要解决的问题是如何让IE识别带有“[”的select语句。

【解决方案6】：

不知道您使用的是哪个版本的 jquery，但即使我对新版本的 jquery 表示怀疑，IE 也无法通过“:checked”“查看”您想要的内容。无论如何，请避免将此属性用于收音机，因为唯一检查过的收音机是无论如何都已更改的收音机。我的意思是编写一个更简单的代码，它可能会有所帮助。

【讨论】：