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

发布于 2024-11-08 11:53:05 字数 2555 浏览 0 评论 0原文

以下行在 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>

请注意，第二个、第三个和第四个都可以工作，但第一个对于 IE 返回“未定义”。它是唯一一个同时带有“.”的产品。和 '[]'。

谢谢

原文

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

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>

Notice that the 2nd, 3rd and 4th all work but the 1st returns 'undefined' for IE. Its the only one with both '.' and '[]'.

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浮萍、无处依 2024-11-15 11:53:05

尝试转义选择器中的方括号，我认为 IE 不太喜欢它们。另外，您忘记关闭属性选择器。

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

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

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

是的，有 2 个反斜杠。

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();

Yes, there are 2 backslashes.

回复收藏 0 原文

无语# 2024-11-15 11:53:05

我认为这会起作用：

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

I think this will work:

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

UPDATE:

Replace your JS with this:

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

$radio.change(function() {

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

});

See working jsFiddle demo

回复收藏 0 原文

勿忘初心 2024-11-15 11:53:05

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

Your select test is invalid javascript:

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

This should work better:

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

Note that the :checked portion is not in the name= portion

回复收藏 0 原文

花开柳相依 2024-11-15 11:53:05

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

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

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

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

I think you need to escape those [] inside your selector:

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

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

At the top it has an entire paragraph about escaping.

回复收藏 0 原文

堇年纸鸢 2024-11-15 11:53:05

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

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

I find your code pretty complicaded. Try something like this:

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

回复收藏 0 原文