Делаем радиокнопку и чекбокс, выбираемые щелчком по тексту, а не только самому элементу
Всё, что написано в статье, можно сделать и с помощью тега <label>!
По просьбе читателя, "раскрываю вопрос в отдельной заметке", хотя всё можно взять из кода в этой и этой статьях блога.
Стандартные элементы HTML "радиокнопка" (<input type="radio">
) и "переключатель" (<input type="checkbox">
)
неудобны тем, что, если не указано дополнительных тегов, пользователь может выбирать их состояния, только щёлкая по маленькому и неудобному
кружку или квадратику, тогда как всем хочется щёлкнуть по сопровождающему тексту. Так как этот текст
не является частью никакого элемента, можно только запрограммировать нужное нам действие с помощью
Javascript. Если не стрелять из пушки по воробьям, привлекая к столь простой задаче громоздкий JQuery
или другой фреймворк, решение выглядит так:
<script type="text/javascript"> function select_radio (myname, mynumber) { var btn = document.f1.elements[''+myname]; for (var i=0; i<btn.length; i++) btn[i].checked = false; btn[mynumber].checked = true; } function select_checkbox (myname) { document.f1.elements[''+myname].checked=!document.f1.elements[''+myname].checked; } </script> <form name="f1"> <div> <input name="r" value="0" type="radio"><span onclick="select_radio('r',0);">Поясняющий текст к радиокнопке 1</span> </div> <div> <input name="r" value="1" type="radio"><span onclick="select_radio('r',1);">Поясняющий текст к радиокнопке 2</span> </div> <div> <input type="checkbox" name="c0" value="1"><span onclick="select_checkbox('c0');">Поясняющий текст к чекбоксу 1</span> </div> <div> <input type="checkbox" name="c1" value="1"><span onclick="select_checkbox('c1');">Поясняющий текст к чекбоксу 2</span> </div> </form>
Можно щёлкать как по тексту, так и по самому элементу, что очень удобно для пользователя. С остальными элементами (кнопками, полями ввода или списками), как правило, таких ухищрений не требуется.
Если Javascript отключён, ничего страшного не произойдёт, просто наш выбор не будет работать и элемент поведёт себя стандартным образом.
"Внутренняя" нумерация радиокнопок и чекбоксов сделана с нуля, так как это принято в Javascript.
Если мы применяем PHP, чтобы автоматизировать вывод HTML-формы, решение примет такой вид:
<script type="text/javascript"> function select_radio (myname, mynumber) { var btn = document.f1.elements[''+myname]; for (var i=0; i<btn.length; i++) btn[i].checked = false; btn[mynumber].checked = true; } function select_checkbox (myname) { document.f1.elements[''+myname].checked=!document.f1.elements[''+myname].checked; } </script> <?php echo '<form name="f1" action="action.php" method="post">'; $radio_count = 2; $radio_text = array ( 'Поясняющий текст к радиокнопке 1', 'Поясняющий текст к радиокнопке 2' ); for ($i=0; $i<$radio_count; $i++) echo '<div> <input name="r" value="'.$i.'" type="radio"> <span onclick="select_radio(\'r\','.$i.');">'.$radio_text[$i].'</span> </div>'; $checkbox_count = 2; $checkbox_text = array ( 'Поясняющий текст к чекбоксу 1', 'Поясняющий текст к чекбоксу 2' ); for ($i=0; $i<$checkbox_count; $i++) echo '<div> <input type="checkbox" name="c'.$i.'" value="1"> <span onclick="select_checkbox(\'c'.$i.'\');">'.$checkbox_text[$i].'</span> </div>'; echo '<div><input type="submit"></div>'; echo '</form>'; ?>
Элементы нумеруются автоматически, а подписи берутся из массивов.
Естественно, теперь код находится в файле типа .php
, расположенном на веб-сервере.
Заодно мы предусмотрели кнопку для отправки данных, которые примет обработчик action.php
, расположенный
в той же папке, что исходный скрипт. Это позволит нам посмотреть особенности поступления данных от
радиокнопки и чекбокса. Наш обработчик просто выведет данные, пришедшие на сервер:
<?php if (isset($_POST['c0'])) echo 'Выбран чекбокс 0<br>'; if (isset($_POST['c1'])) echo 'Выбран чекбокс 1<br>'; if (isset($_POST['r'])) echo 'Выбрана радиокнопка '.intval($_POST['r']).'<br>'; print_r ($_POST); //отладочная печать всех полученных данных ?>
Если выбрать вторую радиокнопку и второй переключатель, увидим вот что:
Выбран чекбокс 1 Выбрана радиокнопка 1 Array ( [r] => 1 [c1] => 1 )
(помним про нумерацию с нуля). Как и положено, не выбранные чекбоксы не передают данных на сервер.
Если принципиально, чтобы данные от чекбокса передавались всегда,
можно перед каждым из них предусмотреть скрытое поле c тем же именем и значением 0, то есть,
<input type="hidden" name="c0" value="0">
для первого чекбокса.
В этом случае сервер будет получать значение c0=0
, если чекбокс не выбран или c0=1
, если выбран.
К сожалению, наше яваскрипт-решение в показанном выше виде тогда перестанет работать, потому что Javascript выберет по имени первый подходящий элемент (скрытое поле). Выручить может метод document.getElementsByName
, к тому же,
он избавит нас от необходимости использовать в коде имя формы f1
. Окончательно получается следующий код на PHP:
<script type="text/javascript"> function select_radio (myname, mynumber) { var items = document.getElementsByName(myname); for (var i=0; i<items.length; i++) items[i].checked = false; items[mynumber].checked = true; } function select_checkbox (myname) { var items = document.getElementsByName(myname); items[1].checked = !items[1].checked; } </script> <?php echo '<form action="action.php" method="post">'; $radio_count = 2; $radio_text = array ( 'Поясняющий текст к радиокнопке 1', 'Поясняющий текст к радиокнопке 2' ); for ($i=0; $i<$radio_count; $i++) echo '<div> <input name="r" value="'.$i.'" type="radio"> <span onclick="select_radio(\'r\','.$i.');">'.$radio_text[$i].'</span> </div>'; $checkbox_count = 2; $checkbox_text = array ( 'Поясняющий текст к чекбоксу 1', 'Поясняющий текст к чекбоксу 2' ); for ($i=0; $i<$checkbox_count; $i++) echo '<div> <input type="hidden" name="c'.$i.'" value="0"> <input type="checkbox" name="c'.$i.'" value="1"> <span onclick="select_checkbox(\'c'.$i.'\');">'.$checkbox_text[$i].'</span> </div>'; echo '<div><input type="submit"></div>'; echo '</form>'; ?>
Обработчик action.php
теперь покажет состояние каждого чекбокса и учтёт, что радиокнопку могли и не выбирать:
<?php if (isset($_POST['c0'])) echo 'Чекбокс 0='.intval($_POST['c0']).'<br>'; if (isset($_POST['c1'])) echo 'Чекбокс 1='.intval($_POST['c1']).'<br>'; if (isset($_POST['r'])) echo 'Выбрана радиокнопка '.intval($_POST['r']).'<br>'; else echo 'Ни одна радиокнопка не выбрана<br>'; print_r ($_POST); //отладочная печать всех полученных данных ?>
29.10.2016, 10:55 [4647 просмотров]