появление блоков по checkbox
Есть такой скрипт
http://jsfiddle.net/danya_postfactum/xdssd/ как сделать чтобы изначально выводились все блоки, а уже при клике на чекбокс остальные скрывались и выводились только блоки принадлежащие этому чекбоксу? Причём если будет отмечено несколько чекбоксов то и блоки должны быть показаны все, которые принадлежат этим чекбоксам? Заранее спасибо за помощь! |
segajb, Это не поможет ?
not checked parents (parent) http://jquery-docs.ru/Traversing/not/#expr http://jquery-docs.ru/Selectors/checked/ http://jquery-docs.ru/Traversing/parents/#expr |
Вот такой простенький вариант:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="checkbox" class="ShowOrHide" value="myDivId1" checked />1 div
<input type="checkbox" class="ShowOrHide" value="myDivId2" checked />2 div
<input type="checkbox" class="ShowOrHide" value="myDivId3" checked />3 div
<hr />
<div id="myDivId1" class="ShowOrHide">div #1 content</div>
<div id="myDivId2" class="ShowOrHide">div #2 content</div>
<div id="myDivId3" class="ShowOrHide">div #3 content</div>
<script>
$('input.ShowOrHide').click(function() {
var this_id = $(this).val();
if ($(this).attr('checked') == 'checked') {
$('div#'+this_id).show();
} else {
$('div#'+this_id).hide();
}
});
</script>
</body>
</html>
|
cmd, боюсь ему надо что-то вроде этого:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="checkbox" class="ShowOrHide" value="myDivId1" />1 div
<input type="checkbox" class="ShowOrHide" value="myDivId2" />2 div
<input type="checkbox" class="ShowOrHide" value="myDivId3" />3 div
<hr />
<div id="myDivId1" class="ShowOrHide">div #1 content</div>
<div id="myDivId2" class="ShowOrHide">div #2 content</div>
<div id="myDivId3" class="ShowOrHide">div #3 content</div>
<script>
$('input.ShowOrHide').click(function() {
var checked = $("input.ShowOrHide:checked");
if ( checked.length == 0 ) {
$("div.ShowOrHide").show();
} else {
$("div.ShowOrHide").hide();
checked.each(function() {
$( 'div#' + $(this).val() ).show();
});
}
});
</script>
</body>
</html>
|
А как сделать, чтобы по клику на 2 чекбокс выводились 2 и 3 блок?
Заранее спасибо! |
Цитата:
<html>
<head>
<style>
</style>
</head>
<body>
<input type="checkbox" id="one">
<input type="checkbox" id="two">
<input type="checkbox" id="three">
<hr>
<div id="divone">div one</div>
<div id="divtwo">div two</div>
<div id="divthree">div three</div>
<script>
boxes=[one, two, three]
divs=[divone, divtwo, divthree]
hideUnchecked=function(){
boxes.forEach(function(box){
window["div"+box.id].style.display=box.checked? "block" : "none"
})
if(this===two&&this.checked) divthree.style.display="block"
if(!boxes.some(function(box){return box.checked})) divs.forEach(function(div){div.style.display="block"})
}
boxes.forEach(function(box){box.onchange=hideUnchecked})
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 22:11. |