0

Есть форма:

<form>
   <div id='type'>
      <input type='radio' id='radio_1' name='type' value='1' />
      <input type='radio' id='radio_2' name='type' value='2' />
      <input type='radio' id='radio_3' name='type' value='3' /> 
   </div>
</form>

Как в jQuery или JavaScript сделать так, чтобы при клике на радио кнопку в <input> устанавливался атрибут "checked="checked"? Тогда как у остальных до этого выбранных этот атрибут должен пропадать. Т.е. у выбранной кнопки всегда должен присутствувать "checked="checked".

Например, мы выбрали кнопку с id='radio1', у нее должен появиться атрибут checked. После этого мы решили выбрать другую кнопку с id='radio2'. После клика на radio2 у нее появляется атрибут ckecked, а у id='radio1' этот атрибут пропадает. И так далее для всех радио переключаталей.

4
  • он же и так устанавливается описанным образом, если у них одинаковый аттрибут name указан средствами css
    – lexxl
    Commented 16 авг. 2016 в 10:07
  • @lexxl Нужно железно установить в input, чтобы было видно через консоль
    – Pavel
    Commented 16 авг. 2016 в 10:09
  • через консоль будет видно. проверить можно так <input type='radio' id='radio_1' name='type' value='1' checked /> || $('#radio_1').prop('checked')
    – lexxl
    Commented 16 авг. 2016 в 10:10
  • @lexxl Могли бы написать пример в ответ?
    – Pavel
    Commented 16 авг. 2016 в 10:15

1 ответ 1

1

Описанный функционал реализуется нативными средствами CSS через указание одинакового атрибута name для желаемых radio-кнопок.

Если есть необходимость реализовать аналогичное поведение для checkbox-элементов (или всё-таки надо дополнительно жестко задать через jQuery), то поможет следующий код:

$(function(){

  $('input').click(function(){
      $('input').each(function(){
          $(this).prop('checked', false);
      });
      $(this).prop('checked', true);
  });
  
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
   <div id='type'>
      <input type='checkbox' id='radio_1' name='type' value='1' />
      <input type='checkbox' id='radio_2' name='type' value='2' />
      <input type='checkbox' id='radio_3' name='type' value='3' /> 
   </div>
</form>

Проверить наличие свойства checked можно таким образом:

$('#radio_1').prop(‌​'checked')

При наличии свойства в консоль выведется true, при отсутствии false.

10
  • Проверить наличие атрибута checked можно таким образом: - а вот и нет - тут проверяется наличие свойства, атрибут при этом может и отсутствовать
    – Grundy
    Commented 16 авг. 2016 в 10:19
  • @lexxl Спасибо за ответ! А в Elements в Chrome не меняется значение у элемента
    – Pavel
    Commented 16 авг. 2016 в 10:19
  • @Pavel, а зачем нужно чтобы оно менялось?
    – Grundy
    Commented 16 авг. 2016 в 10:20
  • @Grundy Нужно, чтобы получить значение value выбранного в данный момент переключателя. Чтобы потом отправить значение через Ajax серверу.
    – Pavel
    Commented 16 авг. 2016 в 10:23
  • 1
    @Pavel, потому что, иногда это может приводить к неожиданным результатам. Кроме того, про версию библиотеки в вопросе ничего не указано, а так как поведение и функции в зависимости от версии очень сильно меняются, принято считать, что речь идет о последней стабильной на данный момент версии.
    – Grundy
    Commented 16 авг. 2016 в 10:31

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.