Форум

txop · #1 (**permalink**) 29.06.2011, 12:57

Есть список элементов:

<li><div class="on">test1</div></li>
<li><div class="off">test2</div></li>
<li><div class="on">test1</div></li>
<li><div class="on">test1</div></li>
<li><div class="off">test1</div></li>

И есть checkbox.

- Хочу сделать так, чтобы при отмеченном чекбоксе или по клику по чекбоксу прятались элементы с классом "off".

- Состояние чекбокса запоминалось.

Сам Я в яваскриптах не очень. Может кто-то подсказать на чем лучше всего это реализовать (JS, Ajax, JQuerry) и как сделать запоминание чекбокса ? И в какую сторону копать...и если не трудно хоть приблизительно накидать основу скрипта

.

walik · #2 (**permalink**) 29.06.2011, 13:11

<ul id="elems">
<li class="on">Test 1</li>
<li class="off">Test 2</li>
<li class="on">Test 3</li>
<li class="off">Test 4</li>
<li class="on">Test 5</li>
</ul>
<input type="checkbox" onclick="change(this)" /> спрятать
<script>
function change(obj) {
    var elems = document.getElementById('elems').getElementsByTagName('li');
    for(i=0;i<elems.length;i++) {
      if (elems[i].className == 'off') {
         if (obj.checked)
            elems[i].style.display = 'none';
         else
            elems[i].style.display = 'list-item';
      }
   }
}
</script>

melky · #3 (**permalink**) 29.06.2011, 13:19

http://jsfiddle.net/mh9YA/

или тут, оно же

скрой, нажми на F5, посмотри снова

<style>li {list-style:none}</style>
<li><div class="on">test1</div></li>
<li><div class="off">test2</div></li>
<li><div class="on">test1</div></li>
<li><div class="on">test1</div></li>
<li><div class="off">test1</div></li>
<br>
<input type="checkbox" value="3k"> чекай.

<script src="http://yandex.st/jquery/1.6.1/jquery.min.js"></script>
<script>
    var checkbox=$( 'input[type=checkbox]' );
    
    if( sessionStorage[ 'hided' ] == 'ok' ){  $("div.off").hide();checkbox[0].checked=true }
        
    checkbox.click( function(){

        if(  this.checked ){
            sessionStorage[ 'hided' ]='ok'
            $("div.off").fadeOut('slow');
        } else {
            sessionStorage[ 'hided' ]='no'
            $("div.off").fadeIn('slow');
        }
    
})
</script>

txop · #4 (**permalink**) 29.06.2011, 13:47

Очень помогло! Всем спасибо!

ИринаR · #5 (**permalink**) 30.08.2017, 16:46

Здравствуйте. Подскажите, как div с id привязать к input.
У меня 6 инпутов. И кликнув на чекбокс чтобы сработала такая функция, о которой вы писали ранее. И чтобы строчки не скрывались, а наоборот добавлялись, как бы скрытый блок изначально

(style="display: none;")

Заранее спасибо.

ИринаR · #6 (**permalink**) 30.08.2017, 16:47

walik,
не могли бы вы мне помочь?

j0hnik · #7 (**permalink**) 30.08.2017, 19:44

<html>
<head>
	<style>
		div{
			display: none;
		}
	</style>
</head>
<body>
		<div>тест1</div><input type="checkbox"><br>
		<div>тест2</div><input type="checkbox"><br>
		<div>тест3</div><input type="checkbox"><br>
		<div>тест4</div><input type="checkbox"><br>
		<div>тест5</div><input type="checkbox"><br>
		<div>тест6</div><input type="checkbox"><br>
	<script>
	[].forEach.call(document.querySelectorAll('input[type="checkbox"]'), function(el){
		el.onchange=function(){
			el.previousElementSibling.style.display = el.previousElementSibling.style.display === 'block'?'none':'block';
	};
});
	</script>
</body>
</html>

j0hnik · #8 (**permalink**) 30.08.2017, 20:04

Если именно по ID то такой вариант

<html>
<head>
	<style>
		div{
			display: none;
		}
	</style>
</head>
<body>
		<div id="cl1">тест1</div><input type="checkbox" class="cl1"><br>
		<div id="cl2">тест2</div><input type="checkbox" class="cl2"><br>
		<div id="cl3">тест3</div><input type="checkbox" class="cl3"><br>
		<div id="cl4">тест4</div><input type="checkbox" class="cl4"><br>
		<div id="cl5">тест5</div><input type="checkbox" class="cl5"><br>
		<div id="cl6">тест6</div><input type="checkbox" class="cl6"><br>
	<script>
	[].forEach.call(document.querySelectorAll('input[type="checkbox"]'), function(el){
		el.onchange=function(){
			var div = document.querySelector('div#'+el.className);
			div.style.display=el.checked?'block':'none';
	};
});
	</script>
</body>
</html>

рони · #9 (**permalink**) 30.08.2017, 20:05

j0hnik,
может поменять input и div и без js сделать?

j0hnik · #10 (**permalink**) 30.08.2017, 20:09

Сообщение от рони

j0hnik,
может поменять input и div и без js сделать?

х.з какая там вложенность будет

Форум

Справочник

Discord чат

Курсы javascript