Появляется текст по чекбоксу
Взял этот материал: http://javascript.ru/forum/jquery/44...tml#post293651
1) Подскажите, пожалуйста, как вытащить Код:
<b></b>2) И как в Код:
<b> |
qwe88,
вроде всего - то пара строк - а ничего непонятно |
По ссылке выше есть нужный мне скрипт.
Но та область, где меняется текст по чекбоксу, должна обязательно находится в томже div-е, что и сами чек боксы. Так вот: 1) Как вытянуть меняющуюся область из div-а? 2) Как менять чекбокс по како-нибудь ссылке? |
qwe88,
может макет сделаите - там одна структура, у вас похоже совсем другая -- зачем натягивать одно на другое |
Никак не получается найти скрипт, который вставляет текст в нужной области, при клике по чекбоксу. Нашел этот вариант, а тут область только в определенном месте, а мне нужно совсем в другом месте страницы. Позишинами из ситуации не выйти, т.к. текбокс находится в popup окне.
Подскажите, пожалуйста, хороший скрипт |
qwe88,
искать надо не скрипт, а изучать документацию, чтобы применять изученные методы для решения задачи. |
А вы не знаете как это сделать?
|
Цитата:
|
Вот сам скрипт:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$(".select").on("click", "input:checkbox", function (a) {
var b = a.delegateTarget;
a = $("b", b);
!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">
<b>Выбор1</b>
<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">
<b>Выбор2</b>
<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>
</body>
</html>
Смысл такой: Код:
<b>Выбор1</b>Код:
<b>Выбор1</b>Код:
</body> |
qwe88,
а у второго div куда расположите? |
Дублирующий div select вообще убираю, он не нужен
|
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>
|
СУПЕР!!
Спасибо вам огромное!! Я уже голову всю порвал. А не подскажите, еще вопрос: Тут другой скрипт работает: 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,
ещё нет элемента а вы ему клик назначаите перенесите скрипт после ссылки поставьте или изучите https://learn.javascript.ru/onload-ondomcontentloaded |
Цитата:
<!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>
|
Ок, спасибо огромное!
|
Подскажите еще, пожалуйста:
При нажатии на ссылку галочка в чекбоксе появляется, а слова в <b></b>нет. Появляются, если шлепну мышкой по самому чекбоксу. А мне нужно, что бы можно было и так и так |
qwe88,
:( |
| Часовой пояс GMT +3, время: 21:58. |