Атрибут «Проверено» для радиокнопок не работает - PullRequest
Новая
       41

Атрибут «Проверено» для радиокнопок не работает

62 голосов
/ 31 августа 2010

По умолчанию переключатель не отображается как checked. Я начал без выбора по умолчанию, выполняя очень простую проверку js, и она не работала. Поэтому я решил использовать значения по умолчанию, пока не выяснил это и не обнаружил, что происходит что-то странное.

Разметка действительна, и я пробовал в FF, Safari и Chrome. Ничего не работает

Я думаю, что это конфликт с библиотекой jQuery, потому что проблема исчезает, когда я удаляю скрипт вызова. 

<label>Do you want to accept American Express?</label> Yes
<input id="amex" style="width: 20px;" type='radio' name='Contact0_AmericanExpress' value='1' /> No
<input style="width: 20px;" type='radio' name='Contact0_AmericanExpress' class='check' value='0' checked="checked" />

Ответы [ 13 ]

76 голосов
/ 05 апреля 2011

Если у вас есть несколько одинаковых имен с проверенным атрибутом, это займет последнее проверенное радио на странице. 

<form>
    <label>Do you want to accept American Express?</label>
    Yes<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress"  />  
    maybe<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress"  checked="checked" />  
    No<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked="checked" />
</form>
31 голосов
/ 10 сентября 2013

Это может быть:

Есть ли ошибка в переключателях в jQuery 1.9.1?

Короче: не используйте attr ()prop () для проверки переключателей.Боже, я ненавижу JS ...

12 голосов
/ 30 января 2017

Радиовходы должны быть внутри формы, чтобы «проверенные» работали.

11 голосов
/ 24 мая 2012

Лучший обходной путь JavaScript для этой надоедливой проблемы -

Просто оберните команду jQuery в setTimeout. Интервал может быть очень маленьким, я использую 10 миллисекунды, и он, кажется, работает отлично. Задержка настолько мала, что ее практически невозможно обнаружить конечным пользователям. 

setTimeout(function(){
  $("#radio-element").attr('checked','checked');
},10);

Это также будет работать с

  • $("#radio-element").trigger('click');
  • $("#radio-element").attr('checked',true);
  • $("#radio-element").attr('checked',ANYTHING_THAT_IS_NOT_FALSE);

Хаки ... Хаки ... Хаки ... Хаки ... Да, я знаю ... следовательно, это обходной путь ....

5 голосов
/ 19 октября 2011

Привет, я также столкнулся с подобной проблемой на странице, сгенерированной с помощью ajax. Я взял сгенерированный источник с помощью плагина Webdeveloper в FF, проверил все входные данные в форме и обнаружил, что внутри скрытого div (есть еще один флажок : none) с тем же идентификатором, как только я изменил идентификатор второго флажка, он начал работать .. Вы также можете попробовать это .. и дайте мне знать результат .. ура

3 голосов
/ 31 августа 2010

Просто скопировал ваш код в: http://jsfiddle.net/fY4F9/

По умолчанию флажок не установлен.У вас работает какой-либо javascript, который будет влиять на радио-блок?

1 голос
/ 08 июля 2016

Документация jQuery содержит подробное объяснение свойства checked против атрибута .

Соответственно, вот еще один способ получить выбранное значение переключателя 

var accepted = $('input[name="Contact0_AmericanExpress"]:checked').val();
1 голос
/ 07 января 2012

привет, я думаю, если вы добавите атрибут id для второго ввода и дадите ему уникальное значение id, он будет работать 

<label>Do you want to accept American Express?</label>
Yes<input id="amex" style="width: 20px;" type='radio' name='Contact0_AmericanExpress'   value='1'/>  
No<input style="width: 20px;" id="amex0" type='radio' name='Contact0_AmericanExpress' class='check' value='0' checked="checked"/>
0 голосов
/ 16 мая 2019

Я мог бы повторить это, задав одинаковое имя тега input для двух групп ввода, как показано ниже: 

<body>
  <div>
      <div>
        <h3>Header1</h3>
      </div>
      <div>
          <input type="radio" name="gender" id="male_1" value="male"> Male<br>
          <input type="radio" name="gender" id="female_1" value="female" checked="checked"> Female<br>
          <input type="submit" value="Submit">
      </div>
  </div>


  <div>
      <div>
        <h3>Header2</h3>
      </div>
      <div>
          <input type="radio" name="gender" id="male_2" value="male"> Male<br>
          <input type="radio" name="gender" id="female_2" value="female" checked="checked"> Female<br>
          <input type="submit" value="Submit">
      </div>
  </div>
</body>

(чтобы увидеть это, нажмите здесь )

Следующие два решения решают проблему:

  1. Использовать разные имена для входов во второй группе
  2. Используйте тег form вместо тега div для одной из групп (на самом деле не могу понять реальную причину, по которой это решит проблему. Хотелось бы услышать некоторые мнения по этому поводу!)
0 голосов
/ 21 февраля 2019 

**Radio button aria-checked: true or false one at a time**

$('input:radio[name=anynameofinput]').change(function() {
            if (this.value === 'value1') {
                $("#id1").attr("aria-checked","true");
                $("#id2").attr("aria-checked","false");
            }
            else if (this.value === 'value2') {;
                $("#id2").attr("aria-checked","true");
                $("#id1").attr("aria-checked","false");
            }
   });
Страница:
...