Почему IE8 не может разрешить мой селектор JQuery для проверенной опции радио? - PullRequest
Новая
       17

Почему IE8 не может разрешить мой селектор JQuery для проверенной опции радио?

2 голосов
/ 19 мая 2011

Эта следующая строка работает как положено в Firefox, но IE возвращает undefined. 

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. Это единственный с обоими. и '[]'.

Спасибо

Ответы [ 6 ]

2 голосов
/ 19 мая 2011

Попытайтесь избежать квадратных скобок в селекторе, я не думаю, что IE любит их слишком сильно. Также вы забыли закрыть селектор атрибутов. 

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

Или с помощью квадратных скобок и точек: 

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

Да, есть 2 обратных слэша.

2 голосов
/ 19 мая 2011

Я думаю, что это будет работать: 

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

1 голос
/ 19 мая 2011

Я думаю, вам нужно избежать этих [] в вашем селекторе: 

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

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

Вверху есть целый абзац о побеге.

1 голос
/ 19 мая 2011

Ваш выбранный тест является недействительным 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 отсутствует в имени = часть

0 голосов
/ 20 мая 2011

Не знаю, какую версию jquery вы используете, но даже несмотря на то, что я сообщаю о новой версии jquery, в IE возникла проблема с «просмотром» того, что вы хотите с помощью этого: проверено. В любом случае избегайте использования этого атрибута для радио, потому что, в общем, единственное проверенное радио - это то, которое в любом случае было изменено. Я хочу сделать более простой код, это может помочь.

0 голосов
/ 19 мая 2011

Я нахожу ваш код довольно сложным. Попробуйте что-то вроде этого: 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...