Форум

segajb · #1 (**permalink**) 10.06.2012, 23:55

Есть такой скрипт
http://jsfiddle.net/danya_postfactum/xdssd/
как сделать чтобы изначально выводились все блоки, а уже при клике на чекбокс остальные скрывались и выводились только блоки принадлежащие этому чекбоксу? Причём если будет отмечено несколько чекбоксов то и блоки должны быть показаны все, которые принадлежат этим чекбоксам?
Заранее спасибо за помощь!

Deff · #2 (**permalink**) 11.06.2012, 00:05

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

cmd · #3 (**permalink**) 11.06.2012, 01:04

Вот такой простенький вариант:

<!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>

devote · #4 (**permalink**) 11.06.2012, 01:13

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>

Newcomer · #5 (**permalink**) 06.09.2015, 03:08

А как сделать, чтобы по клику на 2 чекбокс выводились 2 и 3 блок?
Заранее спасибо!

forwardonly2015 · #6 (**permalink**) 06.09.2015, 16:35

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

А как сделать, чтобы по клику на 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>

Форум

Справочник

Discord чат

Курсы javascript