Radio group value с помощью Javascript

Недавно начал разрабатывать инструментарий для управления стилями шаблона пользователя, основанными на использовании переменных CSS. Задумал нечто похожее на реализацию в Blogger инструмента «Шрифты и Цвета».

В процессе написания javascript класса столкнулся с проблемой: как получить значение группы радио переключателей (radio group)?

Дело в том, что каждый переключатель имеет собственный id и собственное значение value. В группу же они объединяются по атрибуту name (name у них одинаковый).

<input type="radio" name="font-face" id="font-face-georgia" value="Georgia, Times, serif" />
<label for="font-face-georgia" style="font-family: Georgia;" class="font-label">Georgia</label>

<input type="radio" name="font-face" id="font-face-arial" value="Arial, sans-serif" />
<label class="font-label" style="font-family: Arial;" for="font-face-arial">Arial</label>

<input type="radio" name="font-face" id="font-face-courier" value="Courier, monospace" />
<label for="font-face-courier" style="font-family: Courier;" class="font-label">Courier</label>

При обработке/отправке формы (form) отправляется value переключателя, у которого установлен атрибут checked или checked="checked".

Radio group value на «чистом» javascript

var radioGrp = document['forms']['form_name_or_id']['radio_grp_name'];
for(i=0; i < radioGrp.length; i++){
  if (radioGrp[i].checked == true){
    var radioValue = radioGrp[i].value;
  }
}

В данном случае вы должны знать name или id формы и name группы переключателей.

Radio group value с использованием Prototype javascript

Внимание: в данном примере используется javascript-фреймворк Prototype.

function $RF(el, radioGroup) {
  if($(el).type && $(el).type.toLowerCase() == 'radio') {
    var radioGroup = $(el).name;
    var el = $(el).form;
  } else if ($(el).tagName.toLowerCase() != 'form') {
      return false;
  }
  
  var checked = $(el).getInputs('radio', radioGroup).find(
    function(re) {return re.checked;}
  ); 
  return (checked) ? $F(checked) : null;
}

В этом случае вы получаете доступ к элементу или через form (id или object) и radio group name, или посредством radio button (id или object).

var value = $RF('radio_btn_id'); 
var value = $RF('form_id', 'radio_grp_name');

Лично мне этот способ помог. Надеюсь, еще кому-нибудь пригодится.

Копирайты

• Using Prototype Javascript to get the value of a radio group