Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Подружить Чекбоксы с радио-кнопкой. 
:(
    Опции темы
bugsb
Дата 11.9.2009, 14:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 29
Регистрация: 11.9.2009

Репутация: нет
Всего: нет
Код

<input type="checkbox" name="variant[534]" value="1"> Франция<br/>
<input type="checkbox" name="variant[534]" value="2"> Англия<br/>
<input type="radio" name="variant[534]" value="3"> Нигде не был<br/>


надо чтобы когда пользователь отметит "Нигде не был" убирались все отмеченные ранее чекбоксы и наоборот, если он отметит сначала "Нигде не был", а потом захочет выбрать еще и "Францию", надо чтобы радио-кнопка опять была неотмечена. 

Как такое реализовать?
Можно конечно сделать все чекбоксы, но один "нигде не был" уникальным, чтобы если он отмечен другие сбрасывались, но с радиокнопкой наверно понятней для юзера... Хотя если так нельзя, то как сделать так же только со всеми чекбоксами
PM MAIL   Вверх
Amphiluke
Дата 11.9.2009, 15:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Вот.
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <title>Template</title>
   <script type="text/javascript">
      function choose(sender, evnt) {
         var ev = (evnt) ? evnt : event;
         var targ = (ev.target) ? ev.target : ev.srcElement;
         var parentUL = sender.parentNode;
         if (sender != targ) {
            if (sender.getElementsByTagName("ul").length == 0) {
               var inpts = parentUL.getElementsByTagName("input");
               for (var i = 0; i < inpts.length - 1; i++) inpts[i].checked = false;
            } else {
               var lis = parentUL.getElementsByTagName("li");
               lis[lis.length - 1].getElementsByTagName("input")[0].checked = false;
               lis[0].getElementsByTagName("input")[0].checked = true;
            }
         }
      }
   </script>
</head>
<body>
   <form action="#">
      <ul style="list-style: none;">
         <li onclick="choose(this, event);"><input type="radio" name="variant" value="0" id="var0" /><label for="var0"> А я был здесь:</label>
            <ul style="list-style: none;">
               <li><input type="checkbox" name="france" value="1" id="var1" /><label for="var1"> Франция</label></li>
               <li><input type="checkbox" name="england" value="2" id="var2" /><label for="var2"> Англия</label></li>
            </ul>
         </li>
         <li onclick="choose(this, event);"><input type="radio" name="variant" value="3" id="var3" checked="checked" /><label for="var3"> Нигде не был</label></li>
      </ul>
   </form>
</body>
</html>
PM   Вверх
bugsb
Дата 11.9.2009, 17:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 29
Регистрация: 11.9.2009

Репутация: нет
Всего: нет
Amphiluke, большое спасибо smile
PM MAIL   Вверх
bugsb
Дата 15.9.2009, 16:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 29
Регистрация: 11.9.2009

Репутация: нет
Всего: нет
вот что вышло http://itay.ru/quest/

Amphiluke, вопросы у меня выводятся автоматически из mysql.
на данный момент я не знаю как организовать правильный вывод, чтобы все работало, может быть можно какие-нибудь изменения в JS сделать чтобы последний вопрос работал?

вот так получается последний вопрос на html
Код

<li >
     <b>Порекомендуете ли вы нас друзьям?</b>
     <ul>
          <li onclick="choose(this, event);">
               <input type="radio" name="variant[11]" id="12" /> <label for="12">Да</label>
          </li>
          <li onclick="choose(this, event);">
               <input type="radio" name="variant[11]" id="13" /> <label for="13">Нет</label>
          </li>
     </ul>
</li>
PM MAIL   Вверх
Amphiluke
Дата 15.9.2009, 17:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Цитата(bugsb @  15.9.2009,  16:15 Найти цитируемый пост)
может быть можно какие-нибудь изменения в JS сделать чтобы последний вопрос работал?

Удалите вообще оттуда onclick, и будет работать...

P.S. Кстати, дескриптор <li> вне <ul> является примером невалидного кода. Это я к тому, что самый внешний список тоже надо делать <ul>, а не просто следующими друг за другом <li>
Код

<div class="text-left" style="padding-left:50px;">
<ul>
    <li ><b>Откуда Вы узнали о Переславском музее-заповеднике?</b>
       <ul>
          <li><input type="checkbox" name="variant[1]" id="2" /> <label for="2">Интернет (официальный сайт музея)</label></li>
          <li><input type="checkbox" name="variant[1]" id="3" /> <label for="3">Средства массовой информации (газеты, журналы и т.д.)</label></li>
          <li><input type="checkbox" name="variant[1]" id="4" /> <label for="4">Другое</label></li>
       </ul>
    </li>
    <li><b>Где вы были?</b>
       <ul>
          <li onclick="choose(this, event);"><input type="radio" name="variant[5]" id="6" /> <label for="6">А я был здесь:</label>
             <ul>
                <li><input type="checkbox" name="variant[6]" id="8" /> <label for="8">Франция</label></li>
                <li><input type="checkbox" name="variant[6]" id="9" /> <label for="9">Германия</label></li>
                <li><input type="checkbox" name="variant[6]" id="10" /> <label for="10">Испания</label></li>
             </ul>
          </li>
          <li onclick="choose(this, event);"><input type="radio" name="variant[5]" id="7" /> <label for="7">Нигде не был</label></li>
       </ul>
    </li>
    <li ><b>Порекомендуете ли вы нас друзьям?</b>
       <ul>
          <li><input type="radio" name="variant[11]" id="12" /> <label for="12">Да</label></li>
          <li><input type="radio" name="variant[11]" id="13" /> <label for="13">Нет</label></li>
       </ul>
    </li>
</ul>
</div>


P.P.S. Одно и то же имя name для элементов checkbox — тоже не есть правильно с точки зрения валидации.
PM   Вверх
bugsb
Дата 15.9.2009, 18:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 29
Регистрация: 11.9.2009

Репутация: нет
Всего: нет
Amphiluke, 

Цитата

Удалите вообще оттуда onclick, и будет работать...


сложность в том, что я не ручками пишу код, а функцией вывожу из базы, которая формирует все эти <li><ul> и т.д.

onclick ставиться к тем элементам у которых type=radio...
можно еще поставить условие чтобы онклик ставился элементам у которых есть дочерние элементы, но тогда не поставится онклик элементу "Нигде не был"
PM MAIL   Вверх
Amphiluke
Дата 15.9.2009, 19:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
OK, понял. Прпробуйте внести в функцию choose() следующее изменение:
Код

      function choose(sender, evnt) {
         var ev = (evnt) ? evnt : event;
         var targ = (ev.target) ? ev.target : ev.srcElement;
         var parentUL = sender.parentNode;
         if (parentUL.getElementsByTagName("ul").length == 0) return true;
         if (sender != targ) {
            if (sender.getElementsByTagName("ul").length == 0) {
               var inpts = parentUL.getElementsByTagName("input");
               for (var i = 0; i < inpts.length - 1; i++) inpts[i].checked = false;
            } else {
               var lis = parentUL.getElementsByTagName("li");
               lis[lis.length - 1].getElementsByTagName("input")[0].checked = false;
               lis[0].getElementsByTagName("input")[0].checked = true;
            }
         }
      }
PM   Вверх
bugsb
Дата 15.9.2009, 19:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 29
Регистрация: 11.9.2009

Репутация: нет
Всего: нет
Amphiluke, огромнейшее спасибо  smile 
PM MAIL   Вверх
3042
Дата 16.9.2009, 13:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 21
Регистрация: 16.9.2009

Репутация: 1
Всего: 0
Можно "нигде не был" и кнопкой сделать - так проще сбрасывать флажки, и логичнее будет.
PM MAIL   Вверх
bugsb
Дата 16.9.2009, 18:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 29
Регистрация: 11.9.2009

Репутация: нет
Всего: нет
Цитата

Можно "нигде не был" и кнопкой сделать - так проще сбрасывать флажки, и логичнее будет.

мне кажется для анкеты не логично делать один из вариантов ответа кнопкой...

еще у меня к любому из вариантов ответа может прилагаться поле type="text"
я вот думаю как лучше будет сделать?
1) тектовое поле изначально не активно, при выборе соответствующего варианта поле становится активным.
2) тектовое поле активно, как только там устанавливается курсор отмечается соответсвующий флажок (чекбокс или радио).

пример:
Код

<input type="checkbox" name="variant[1]" id="4" /> <label for="4">Другое</label> 
&nbsp;<input type="text" style="width:250px;" name="text[1]" />


для варианта №2 думал сделать так
Код

<input type="checkbox" name="variant[1]" id="4" /> <label for="4">Другое &nbsp;<input type="text" style="width:250px;" name="text[1]" /></label> 

но label в этом случае не катит :-(
PM MAIL   Вверх
EmilRegis
Дата 17.9.2009, 05:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.9.2007

Репутация: 3
Всего: 4
мне кажется первый вариант логичнее)
PM MAIL   Вверх
bugsb
Дата 17.9.2009, 12:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 29
Регистрация: 11.9.2009

Репутация: нет
Всего: нет
EmilRegis, кажется чтобы такое сделать надо jquery использовать?
PM MAIL   Вверх
bugsb
Дата 18.9.2009, 07:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 29
Регистрация: 11.9.2009

Репутация: нет
Всего: нет
никто не знает? О_о
PM MAIL   Вверх
EmilRegis
Дата 18.9.2009, 07:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.9.2007

Репутация: 3
Всего: 4
да почему сразу jquery? простым javascript-ом обрабатывать события нажатия на чекбокс...типа onclick или onchange на чекбоксе...

текстовому полю присваиваешь id-шник например id="text1", id="text2"  и т.д. 
Далее на событие чекбокса вешаешь функцию обработки
Код

function chagecheck(check_id){
   var textfield = document.getElementById("text" + check_id);
   if(document.getElementById(check_id).checked) textfield.disabled = true;
   else textfield.disabled = false;
}


Это сообщение отредактировал(а) EmilRegis - 18.9.2009, 07:45
PM MAIL   Вверх
bugsb
Дата 21.9.2009, 22:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 29
Регистрация: 11.9.2009

Репутация: нет
Всего: нет
EmilRegis, благодарю smile 
только true с false пришлось поменять местами


Amphiluke, немогли бы вы еще немного помочь?
изначально все текстовые поля disabled, когда отмечается чекбокс тектовое поле становится активно. А если переключить радио кнопку, чекбоксы снимуться, а тектовые поля так и будут активны... пытался что-то сам сделать, почти получилось, только в итоге и чекбоксы становятся неактивными  smile 

вот как делал

Код

function choose(sender, evnt) {
         var ev = (evnt) ? evnt : event;
         var targ = (ev.target) ? ev.target : ev.srcElement;
         var parentUL = sender.parentNode;
         if (parentUL.getElementsByTagName("ul").length == 0) return true;
         if (sender != targ) {
            if (sender.getElementsByTagName("ul").length == 0) {
               var inpts = parentUL.getElementsByTagName("input");
               for (var i = 0; i < inpts.length - 1; i++) {
                    inpts[i].checked = false;
                    inpts[i].disabled = true;
               }
            } else {
               var lis = parentUL.getElementsByTagName("li");
               lis[lis.length - 1].getElementsByTagName("input")[0].checked = false;
               lis[0].getElementsByTagName("input")[0].checked = true;
               
               lis[lis.length - 1].getElementsByTagName("input")[0].disabled = true;
               lis[0].getElementsByTagName("input")[0].disabled = false;
            }
         }
      }
      
      function chagecheck(check_id){
        var textfield = document.getElementById("text" + check_id);
        if(document.getElementById(check_id).checked) textfield.disabled = false;
        else textfield.disabled = true;
        }


Это сообщение отредактировал(а) bugsb - 21.9.2009, 22:32
PM MAIL   Вверх
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0685 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.