Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.07.2014, 18:55
Интересующийся
Отправить личное сообщение для Gasherez Посмотреть профиль Найти все сообщения от Gasherez
 
Регистрация: 26.08.2013
Сообщений: 25

Select with checkbox
Здравствуйте! Имеется такая разметка:
<div class="select-wishes">
<div class="selected-items"></div>
<ul>
<li>
<label for="with-conditioning">
<input type="checkbox" name="" id="with-conditioning"> Кондиционер
</label>
</li>
<li>
<label for="with-luggage">
<input type="checkbox" name="" id="with-luggage"> С собой большой багаж
</label>
</li>
<li>
<label for="with-pet">
<input type="checkbox" name="" id="with-pet"> С животным
</label>
</li>
<li>
<label for="with-smoking">
<input type="checkbox" name="" id="with-smoking"> Курить в машине
</label>
</li>
</ul>
</div>

ul спрятан. Нужен эффект селекта. При открытии выбираем несколько чекбоксов, текст который в теге label записывается в <div class="selected-items">. Подскажите пожалуйста кто знает как решить эту задачку. Я такое делал с обычным текстом методом $().text Тут не знаю как начать.
Ответить с цитированием
  #2 (permalink)  
Старый 10.07.2014, 19:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,127

Gasherez,
обойти все input и если выбран сохранить текст потом переменную со всеми выбранными текстами вывести в див
Ответить с цитированием
  #3 (permalink)  
Старый 10.07.2014, 20:08
Интересующийся
Отправить личное сообщение для Gasherez Посмотреть профиль Найти все сообщения от Gasherez
 
Регистрация: 26.08.2013
Сообщений: 25

А как их обходить если они в label, а label в li
Ответить с цитированием
  #4 (permalink)  
Старый 10.07.2014, 20:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,127

Gasherez,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var s = $(".select-wishes input:checked"), arr = [];
       s.each(function(indx, el){
         var text = $("[for='"+el.id+"']").text();
         arr.push($.trim(text))});
      alert(arr)
});
  </script>
</head>

<body>
<div class="select-wishes">
 <div class="selected-items"></div>
 <ul>
 <li>
 <label for="with-conditioning">
 <input type="checkbox" name="" id="with-conditioning"> Кондиционер
</label>
 </li>
 <li>
 <label for="with-luggage">
 <input type="checkbox" name="" id="with-luggage" checked="checked"> С собой большой багаж
</label>
 </li>
 <li>
 <label for="with-pet">
 <input type="checkbox" name="" id="with-pet" checked="checked"> С животным
</label>
 </li>
 <li>
 <label for="with-smoking">
 <input type="checkbox" name="" id="with-smoking"> Курить в машине
</label>
 </li>
 </ul>
 </div>

</body>

</html>

Последний раз редактировалось рони, 22.04.2021 в 22:18.
Ответить с цитированием
  #5 (permalink)  
Старый 10.07.2014, 21:03
Интересующийся
Отправить личное сообщение для Gasherez Посмотреть профиль Найти все сообщения от Gasherez
 
Регистрация: 26.08.2013
Сообщений: 25

Спасибо. Будем пробовать.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
checkbox, radio и select c option Hekumok Общие вопросы Javascript 8 12.04.2016 17:51
Считать данные в select согласно выбранному checkbox SLameN Общие вопросы Javascript 0 17.06.2014 14:12
select, checkbox, onchange olnew Элементы интерфейса 4 25.03.2013 22:46
Метод для конвертирования едениц px, em, %, pt. jegit Элементы интерфейса 0 07.03.2013 16:15
как сделать зависимость checkbox и select MasterHrust Javascript под браузер 12 09.01.2012 13:27