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

Why does IE8 fail to resolve my JQuery selector for a checked radio option?

本文关键字：选项 单选 选择器 JQuery IE8 我的 为什么      更新时间：2023-09-26

以下行在Firefox中按预期工作，但IE返回"undefined"。

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

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

请注意，问题似乎是在无线电元素的名称中使用了"."和"[]"。 然而，这就是MVC呈现它们的方式 ASP.NET。 这是一个在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不太喜欢它们。 此外，您忘记关闭属性选择器。

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

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

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

是的，有 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());  
});

查看工作 jsFiddle 演示

你选择的测试是无效的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= 部分中

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

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

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

在顶部，它有一整段关于逃跑的段落。

我发现你的代码很复杂。尝试这样的事情：

<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>

不知道你正在使用的jquery版本，但即使我对新版本的jquery感到愤怒，IE在"看到"你想要什么方面存在问题"：checked"。无论如何，避免将此贡品用于收音机，因为，好吧，唯一检查的收音机无论如何都是改变的收音机。我的观点是制作一个更简单的代码，这可能会有所帮助。

相关文章：