аватар Автор: Сергей Касаткин | 22 июля 2015 14:08

Статьи / JavaScript /

Как снять выбор (check) с радио-кнопки (radio button)

Как Вы знаете, по-умолчанию секция radio-кнопок в JavaScript не позволяет снять выбор со всех кнопок. Допустим, пользователь решил не выбирать, но на радио-кнопку уже нажал. Что делать? Существует два способа решения этой проблемы.

1. При повторном нажатии просто меняем значение (рекомендуемый)

<input type="radio" 
  onMouseDown="this.isChecked=this.checked;" 
  onClick="this.checked=!this.isChecked;" 
  name="myradio" value="0"/> Первый пункт
  
<input type="radio"
  onMouseDown="this.isChecked=this.checked;"
  onClick="this.checked=!this.isChecked;"
  name="myradio" value="1"/> Второй пункт
  
<input type="radio"
  onMouseDown="this.isChecked=this.checked;"
  onClick="this.checked=!this.isChecked;"
  name="myradio" value="2"/> Третий пункт

Смотрим демку и скачиваем исходник.

Демонстрация Скачать исходники


В данном примере главное не забывать следить за name. Для каждой серии radio button нужно задавать уникальный.


2. Ищем схожие по имени и при нажатии на сброс удаляем выбор

<script language="JavaScript">
  function uncheckAllRadio(name){
    var obj = document.getElementsByName(name);
    for(i=0; i
      obj[i].checked = false;
  }
</script>

Подставляем нужное имя (name) кнопок секции. После перебираются все элементы с заданным именем и у каждого снимается флаг (checked = false).

HTML-код в таком случае может выглядеть так:

<input type="button" value="Clear" onClick="uncheckAllRadio('myradio')"/>

<input type="radio" name="myradio" value="0"/>0
<input type="radio" name="myradio" value="1"/>1
<input type="radio" name="myradio" value="2"/>2


Спасибо за внимание!
 



Похожие статьи


Комментарии к статье (vk.com)