Как скрыть ненужные элементы чекбоксом ?
Есть список элементов:
<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) и как сделать запоминание чекбокса ? И в какую сторону копать...и если не трудно хоть приблизительно накидать основу скрипта :) . |
<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>
|
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>
|
Очень помогло! Всем спасибо!
|
вопрос по дополнению к теме
Здравствуйте. Подскажите, как div с id привязать к input.
У меня 6 инпутов. И кликнув на чекбокс чтобы сработала такая функция, о которой вы писали ранее. И чтобы строчки не скрывались, а наоборот добавлялись, как бы скрытый блок изначально (style="display: none;") Заранее спасибо. |
walik,
не могли бы вы мне помочь? |
<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>
|
Если именно по 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>
|
j0hnik,
может поменять input и div и без js сделать? |
Цитата:
|
| Часовой пояс GMT +3, время: 08:36. |