Основы работы с XHTML и CSS

       

Извлечение данных радио кнопки


Следующий пример демонстрирует использование радио кнопок для ввода данных. При выборе кнопки цвета и нажатии на кнопку "Submit" будет выводиться значение выбранной кнопки.


<!-- Сценарий браузера --> <script type="text/javascript"> function Get_Color() { var i var Button var Output

for (i=1; i<=3; i++){ Button = document.getElementById("Button" + i) if (Button.checked == true) { Output = document.getElementById("Output") Output.innerHTML = "<b>You selected: </b>" + Button.value } } } </script>

<!-- Код XHTML --> <div> What is your favorite color?<br/> <input id="Button1" type="radio" name="Button" value="Red" checked="checked"/>Red<br/> <input id="Button2" type="radio" name="Button" value="Green"/>Green<br/> <input id="Button3" type="radio" name="Button" value="Blue"/>Blue<br/> <input type="button" value="Submit" onclick="Get_Color()"/><br/> <span id="Output" style="color:red"></span> </div>

При нажатии кнопки "Submit" активируется локальная функция JavaScript с именем Get_Color(). Сценарий проверяет каждую из кнопок, чтобы выяснить, какая из них включена, и вывести значение этой кнопки.



Содержание раздела