Как получить текст радиокнопки (не значение) - PullRequest
Новая
       9

Как получить текст радиокнопки (не значение)

2 голосов
/ 21 августа 2009

Я знаю, что могу получить атрибут "значение" для радиокнопки, но мне странно трудно получить текст радиокнопки.

Рассмотрим пример ниже. Он имеет 3 радиокнопки и пытается предупредить значение первой радиокнопки, которая «красная», а затем пытается предупредить текст радиокнопки «яблоко», но это не удается.

Получение текста практически любого элемента можно сделать с помощью elem.childNodes [0] .nodeValue. Почему это не работает для радиокнопок? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Radio Buttons</title>
<style type="text/css">
</style>
<script type="text/javascript">
function start(){
  var rblist = document.getElementsByName("colors");
  var elem = rblist[0];
  alert(elem.value); // PRINTS "RED"
  alert(elem.childNodes[0].nodeValue); //THROWS ERROR
}
</script>       
</head>
<body onload="start();">
<input type="radio" name="colors" value="red" checked>apple</input>
<input type="radio" name="colors" value="blue">sky</input>
<input type="radio" name="colors" value="green">grass</input>
</body>  
</html>

Ответы [ 4 ]

11 голосов
/ 21 августа 2009

Это не работает, потому что внутри <input> нет такого понятия, как текст - это недопустимо в XHTML. Должно быть:

<input type="radio" name="colors" value="red" id="radio1" checked="checked" /><label for="radio1">apple</label>

Тогда вы можете искать текст внутри <label>.

4 голосов
/ 21 августа 2009 
elem.nextSibling.nodeValue.replace('\n', '')

Замена состоит в том, чтобы избавиться от символа новой строки (может отличаться в разных ОС, я использую Windows), который есть по какой-то причине.

1 голос
/ 11 октября 2013 
<form id="myForm">
  <ul>
      <li><input type="radio" name="colors" value="red">apple</li>
      <li><input type="radio" name="colors" value="blue">sky</li>
      <li><input type="radio" name="colors" value="green">grass</li>
  </ul>
</form>

<script> 
(function(){
    var form = document.getElementById("myForm");

    var colorFields = form.elements["colors"];

   alert(colorFields[0].nextSibling.data); //alerts the text apple not the value red. 
});
0 голосов
/ 24 июля 2017

Я добавил этот ответ, потому что раньше не было полного решения вопроса.
В приведенном ниже коде используются две функции-прототипа из объекта Array:

  1. forEach для добавления прослушивателя событий щелчка для каждого радиоузла

  2. filter для извлечения проверенного радио узла

, поскольку RadioNodeList не имеет этих встроенных функций. 

var rblist = document.getElementsByName("colors");;

[].forEach.call(rblist, function(e) {
  e.addEventListener('click', showText, false)
});

function showText() {
  var rb = [].filter.call(rblist, function(e) {
    return e.checked;
  })[0];
  console.log(rb.nextElementSibling.innerText);
};
<input type="radio" name="colors" value="red" /><label>apple</label>
<input type="radio" name="colors" value="blue" /><label>sky</label>
<input type="radio" name="colors" value="green" /><label>grass</label>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...