Взаимоисключаемые чекбоксы

Иногда нужно в обычной вэб-форме выполнить такую хитрую задачу, как взаимоисключаемые чекбоксы ('mutual checkboxes'). И нужно, чтобы это были не radio-кнопки, а именно checkbox'ы.

Предположим, есть группа опций и в ней по умолчанию приходит одна опция с атрибутом checked, назовём её «Main option». А наше условие — это при включении любой другой опции, первая (Main Option) отключалась. И тоже самое в обратном порядке — при включении Main Option отключались все включенные.

Еще один важный момент, мы все поля input имеют в нашем примере одинаковое имя (name), но разные значения (values). Взгляните на пример. Это то, что вы искали?

Решается эта задача простым javascript'ом:

<script language="JavaScript" type="text/javascript"><!--
function choice(field, i) {

if (i == 0) { // default checkbox selected.
    if (field[0].checked == true) {
    for (i = 1; i < field.length; i++)
    field[i].checked = false;
   }
}
else  {  // on selecting any checkbox the default is null.
    if (field[i].checked == true) {
    field[0].checked = false;
      }
   }
}
// -->
</script>

В этом скрипте есть функция choice, которая и определяет все действия. Важно запомнить пару вещей при его использовании. Разумеется, его можно линковать в head или вставлять как он есть (см. код выше).

Второе, что нужно усвоить — это как его вставлять в html-код. Посмотрите на форму из моего примера:

<form name="myform" action="" method="">
	<p>
	<label><input type="checkbox" name="target" value="Main Option" onclick="choice(document.myform.target, 0)" checked="checked" />
	Main Option</label><br />
	<label><input type="checkbox" name="target" value="Option 1" onclick="choice(document.myform.target, 1)" />
	Option 1</label><br />
	<label><input type="checkbox" name="target" value="Option 2" onclick="choice(document.myform.target, 2)" />
	Option 2</label><br />
	<label><input type="checkbox" name="target" value="Option 3" onclick="choice(document.myform.target, 3)" />
	Option 3</label><br />
	<label><input type="checkbox" name="target" value="Option 4" onclick="choice(document.myform.target, 4)" />
	Option 4</label><br />
	<label><input type="checkbox" name="target" value="Option 5" onclick="choice(document.myform.target, 5)" />
	Option 5</label><br />
	<label><input type="checkbox" name="target" value="Option 6" onclick="choice(document.myform.target, 6)" />
	Option 6</label><br />
</p>
</form>

В ней все поля input объявлены с одним и тем же именем (name) — target, но имеют разные значения (values). И первая опция Main Option объявлена заранее как выделенная. Далее нужно вызвать функцию choice при кликании по другим опциям для каждого input'а: onclick="choice (document.myform.target, 1)" — где myform это название моей формы, target это название input'а, а цифра это переменная для javascript'a.

Для правильного функционирования важно правильно указать эту самую переменную. Поле, которое назначено по умолчанию выделенным должно быть со значением 0. Каждое следующее поле нужно увеличивать на 1 (единицу). Тогда всё будет работать, как в примере.

Теперь Вы можете скачать скрипт Mutual Checkboxes целиком и использовать его для своих целей.

Статья также разрешена для распространения в любом виде, но не забывайте указывать оригинальный источник и автора :).

Сопроводительный пост к этой статье.

Обсуждение закрыто.