hide all divs except those with checked boxes?

angst · 12-19-2012, 03:15 PM

hello, I'm wondering how I can hide all divs on a page that do not have a checkbox thats checked.

my html;

PHP Code:


			
<div id='2_ImageBlock' style='width: 170px; height: 170px; border: 1px solid grey; float: left; overflow:hidden;    padding: 3px; margin: 4px;'>

    <label><input type='checkbox' name='SelectedImage[]' id='SelectedImage' value='Image.jpg' /> Use Image<br />

    <img src='Image.jpg' width='150'  />

    </label>

</div>

using jquery, maybe something like this?

$('div:' + $("input:checkbox").not(":checked")).hide();

Philip M · 12-19-2012, 03:22 PM

<div id='2_ImageBlock'

An id may not start with a digit

Do you mean that you want to show all the divs where the associated checkbox is checked and hide those where the checkbox is unchecked?
Obviously the checkboxes must remain visible.

Code:

<input type="checkbox" id = "cbox1" onclick="showMe('div1', this)" checked>
<div id="div1" style="display:block;">XYZ</div>

<script type = "text/javascript">

function showMe (whichdiv, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(whichdiv).style.display = vis;
}

</script>

It is your responsibility to die() if necessary….. - PHP Manual

angst · 12-19-2012, 03:43 PM

yes, thats been changed, but it doesn't solve anything...

xelawho · 12-19-2012, 03:44 PM

if your html will always have that structure...

Code:

<script>
var divs=document.getElementsByTagName("div")
  for (var i = 0; i < divs.length; i++) {
divs[i].style.display=divs[i].children[0].children[0].checked?"block":"none";
}
</script>

angst · 12-19-2012, 03:58 PM

thats perfect, one last question. how can I exclude another static div?

thanks again!

xelawho · 12-19-2012, 04:00 PM

give the divs you want to operate on a class name (that way you can get rid of that ugly inline styling, too)...

Code:

<html>
<head>
<style>
.imgcont{
width: 170px; 
height: 170px; 
border: 1px solid grey; 
float: left; 
overflow:hidden;    
padding: 3px; 
margin: 4px;
}
</style>
</head>
<body>
<input type="button" value="show 'em" onclick="showHide()"/><br>
<div id='ImageBlock2' class='imgcont'> 
    <label><input type='checkbox' name='SelectedImage[]' id='SelectedImage' value='Image.jpg'/> Use Image<br /> 
    <img src='Image.jpg' width='150'  /> 
    </label> 
</div>
<div id='ImageBlock3' class='imgcont'> 
    <label><input type='checkbox' name='SelectedImage[]' id='SelectedImage' value='Image.jpg' /> Use Image<br /> 
    <img src='Image.jpg' width='150'  /> 
    </label> 
</div>
<script>
function showHide(){
var divs=document.getElementsByTagName("div")
  for (var i = 0; i < divs.length; i++) {
  if(divs[i].className=="imgcont"){
divs[i].style.display=divs[i].children[0].children[0].checked?"block":"none";
		}
	}
}
</script>
</body>
</html>