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

         

Извлечение данных из флажков


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


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

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

<!-- Код XHTML --> <div> What are your favorite colors?<br/> <input id="Colors1" type="checkbox" value="Red"/>Red<br/> <input id="Colors2" type="checkbox" value="Green"/>Green<br/> <input id="Colors3" type="checkbox" value="Blue"/>Blue<br/> <input id="Colors4" type="checkbox" value="Yellow"/>Yellow<br/> <input id="Colors5" type="checkbox" value="Maroon"/>Maroon<br/> <input id="Colors6" type="checkbox" value="Purple"/>Purple<br/> <input id="Colors7" type="checkbox" value="Aqua"/>Aqua<br/> <input id="Colors8" type="checkbox" value="Teal"/>Teal<br/> <input type="button" value="Submit" onclick="Get_Colors()"/><br/> <span id="Output" style="color:red"></span> </div>

В этом примере флажкам присвоены уникальные значения id, а не имена, так как они будут обрабатываться в браузере, а не на сервере. Когда происходит щелчок на кнопке "Submit", она активирует локальную функцию JavaScript с именем Get_Colors(). Этот сценарий проверяет каждый из флажков, какой из них был отмечен, и выводит значения этих флажков.



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