Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 12.04.2015, 13:44
Аватар для qwe88
Кандидат Javascript-наук
Отправить личное сообщение для qwe88 Посмотреть профиль Найти все сообщения от qwe88
 
Регистрация: 14.06.2014
Сообщений: 137

Дублирующий div select вообще убираю, он не нужен
Ответить с цитированием
  #12 (permalink)  
Старый 12.04.2015, 13:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

qwe88,
<!DOCTYPE HTML>
<html>

<head>

  <meta charset="utf-8">
  <title>demo</title>
  <style type="text/css">
  b{
    display: block;
  }

  </style>
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
    var divs = $("div.select");
    divs.on("click", "input:checkbox", function (a) {
        var b = a.delegateTarget;
        var i = divs.index(b) ;
        a = $("b.select").eq(i);
        !a.data("old") && a.data("old", a.text());
        b = $(":checked", b).parent().text() || a.data("old");
        a.text(b)
    });
})
</script>

</head>

<body>
<div class="select">

      <div class="option">
       <label><input type="checkbox" /> текст 1</label>
       <label><input type="checkbox" /> текст 2</label>
       <label><input type="checkbox" /> текст 3</label>
       <label><input type="checkbox" /> текст 4</label>
      </div>
     </div>


     <div class="select">

      <div class="option">
       <label><input type="checkbox" /> текст 1</label>
       <label><input type="checkbox" /> текст 2</label>
       <label><input type="checkbox" /> текст 3</label>
       <label><input type="checkbox" /> текст 4</label>
      </div>
     </div>
 <b class="select">Выбор1</b>
 <b class="select">Выбор2</b>
</body>
</html>
Ответить с цитированием
  #13 (permalink)  
Старый 12.04.2015, 14:05
Аватар для qwe88
Кандидат Javascript-наук
Отправить личное сообщение для qwe88 Посмотреть профиль Найти все сообщения от qwe88
 
Регистрация: 14.06.2014
Сообщений: 137

СУПЕР!!
Спасибо вам огромное!! Я уже голову всю порвал.
А не подскажите, еще вопрос:
Тут другой скрипт работает: http://jsfiddle.net/vfn4b26L/
А у меня нет. Даже когда вставляю только этот код и ничего больше
<!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=windows-1251" />
<title>Документ без названия</title>

</head>

<body>
<script type="text/javascript">
link.onclick = function(){
    chbx.checked = chbx.checked ? false : true;
};
</script>

<a href="#" id="link">
    <img src="http://img.okino.ua/emoji/img/smile.png" alt=""/>
</a>
<input type="checkbox" id="chbx">

</body>
</html>

Последний раз редактировалось qwe88, 12.04.2015 в 14:07.
Ответить с цитированием
  #14 (permalink)  
Старый 12.04.2015, 14:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

qwe88,
ещё нет элемента а вы ему клик назначаите
перенесите скрипт после ссылки поставьте или изучите
https://learn.javascript.ru/onload-ondomcontentloaded
Ответить с цитированием
  #15 (permalink)  
Старый 12.04.2015, 14:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Сообщение от qwe88
Дублирующий div select вообще убираю, он не нужен
тогда можно так
<!DOCTYPE HTML>
<html>

<head>

  <meta charset="utf-8">
  <title>demo</title>
  <style type="text/css">
  b{
    display: block;
  }

  </style>
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
    var div = $("div.select"), chec = $("input:checkbox", div), b = $("b.select");
    b.data("old", b.text())
    div.on("click", chec, function (a) {
        var text = chec.filter(':checked').parent().text() || b.data("old");
        b.text(text)
    });
})
</script>

</head>

<body>
<div class="select">
      <div class="option">
       <label><input type="checkbox" /> текст 1</label>
       <label><input type="checkbox" /> текст 2</label>
       <label><input type="checkbox" /> текст 3</label>
       <label><input type="checkbox" /> текст 4</label>
      </div>
     </div>
 <b class="select">Выбор</b>
</body>
</html>
Ответить с цитированием
  #16 (permalink)  
Старый 12.04.2015, 14:37
Аватар для qwe88
Кандидат Javascript-наук
Отправить личное сообщение для qwe88 Посмотреть профиль Найти все сообщения от qwe88
 
Регистрация: 14.06.2014
Сообщений: 137

Ок, спасибо огромное!
Ответить с цитированием
  #17 (permalink)  
Старый 12.04.2015, 15:29
Аватар для qwe88
Кандидат Javascript-наук
Отправить личное сообщение для qwe88 Посмотреть профиль Найти все сообщения от qwe88
 
Регистрация: 14.06.2014
Сообщений: 137

Подскажите еще, пожалуйста:
При нажатии на ссылку галочка в чекбоксе появляется, а слова в <b></b>нет. Появляются, если шлепну мышкой по самому чекбоксу. А мне нужно, что бы можно было и так и так
Ответить с цитированием
  #18 (permalink)  
Старый 12.04.2015, 16:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

qwe88,
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проблема со scroll Chrome Элементы интерфейса 2 21.10.2013 14:46
прогкрутка к якорям cOAPerator Общие вопросы Javascript 20 27.08.2013 03:30
нужно заставить одновременно работать слайдер и модальное окно обратной связи kvant355 Javascript под браузер 3 22.07.2013 16:34
Выравнять три дива в одной строке debugx (X)HTML/CSS 9 06.10.2011 12:03