Делаем радиокнопку и чекбокс, выбираемые щелчком по тексту, а не только самому элементу

Всё, что написано в статье, можно сделать и с помощью тега <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 [4530 просмотров]