Форум

qwe88 · #11 (**permalink**) 12.04.2015, 13:44

Дублирующий div select вообще убираю, он не нужен

рони · #12 (**permalink**) 12.04.2015, 13:56

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>

qwe88 · #13 (**permalink**) 12.04.2015, 14:05

СУПЕР!!
Спасибо вам огромное!! Я уже голову всю порвал.
А не подскажите, еще вопрос:
Тут другой скрипт работает: 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>

рони · #14 (**permalink**) 12.04.2015, 14:13

qwe88,
ещё нет элемента а вы ему клик назначаите
перенесите скрипт после ссылки поставьте или изучите
https://learn.javascript.ru/onload-ondomcontentloaded

рони · #15 (**permalink**) 12.04.2015, 14:22

Сообщение от 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>

qwe88 · #16 (**permalink**) 12.04.2015, 14:37

Ок, спасибо огромное!

qwe88 · #17 (**permalink**) 12.04.2015, 15:29

Подскажите еще, пожалуйста:
При нажатии на ссылку галочка в чекбоксе появляется, а слова в <b></b>нет. Появляются, если шлепну мышкой по самому чекбоксу. А мне нужно, что бы можно было и так и так

рони · #18 (**permalink**) 12.04.2015, 16:11

qwe88,

Форум

Справочник

Discord чат

Курсы javascript