Hide or Show Sets of Divs using a Checkboxes

Question

MArun25039 0 Newbie Poster

11 Years Ago

Hello,

The below code is mean to hit or show some data based on checkbox is checked off or not using Javascript. I found a bit of code on a Forum and tried modifying it. I'm trying to see if it's possible show data based on multiple Div Tags. For example show a list of places to eat that are in "NJ", "Cheap" and have "Pizza".

I was curious is this is possible at all and if so could you direct me to a site/forum/thread that might help.

Thanks in advance for your help.

<head>
</head>
<body>
<script language="javascript">
function toggle(divId) {
    var divArray = document.getElementsByTagName("div");
    for(i = 0; i < divArray.length; i++){
        if(divArray[i].id == divId){
            if(divArray[i].style.display != 'none'){
                divArray[i].style.display = 'none';
            }else{
                divArray[i].style.display = '';
            }
        }
    }
}
</script>
<form>

<input type="checkbox" checked onClick="toggle('nj');"> NJ
<input type="checkbox" checked onClick="toggle('ny');"> NY
<input type="checkbox" checked onClick="toggle('ct');"> CT
<BR>
<input type="checkbox" checked onClick="toggle('cheap');"> Cheap
<input type="checkbox" checked onClick="toggle('moderate');"> Moderate
<input type="checkbox" checked onClick="toggle('expensive');"> Expensive
<BR>
<input type="checkbox" checked onClick="toggle('burgers');"> Burgers
<input type="checkbox" checked onClick="toggle('pizza');"> Pizza
<input type="checkbox" checked onClick="toggle('sandwiches');"> Sandwiches
<BR>
</form>

<div id="non-descript">Places to Eat:</div>
<BR>
<div id="nj" >NJ Place #1</div>
<div id="nj" >NJ Place #2</div>
<div id="nj" >NJ Place #3</div>
<div id="nj" >NJ Place #4</div>
<div id="ny">NY Place #1</div>
<div id="ny">NY Place #2</div>
<div id="ny">NY Place #3</div>
<div id="ny">NY Place #4</div>
<div id="ct">CT Place #1</div>
<div id="ct">CT Place #2</div>
<div id="ct">CT Place #3</div>
<div id="ct">CT Place #4</div>


<BR>
</body>

checkbox div javascript

2 Contributors
3 Replies
2K Views
1 Week Discussion Span
Latest Post 11 Years Ago Latest Post by Taywin

All 3 Replies

Taywin 312 Posting Virtuoso

11 Years Ago

Yes, you can do it in may different ways. Below is one way to do it to match your example. If you have any question about how it works, please ask. One big note is that the property "id" should be unique to every element. The script you gave here is teaching you a bad way of creating HTML elements. If you want multiple elements with the same name, use "name" property instead. The different when you want to obtain the property, instead of calling it directly using dot reference (element.id), you would call function getAttribute(attributeName) instead.

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
  </head>
  <body>
  <script language="javascript">
  function toggle(matchingAttribute) {
    // optain all div elements in the page
    var divArray = document.getElementsByTagName("div");
      for(i=divArray.length-1; i>=0; i--) {  // for each div
      if(divArray[i].id.match("_"+matchingAttribute+"_")) {
        if(divArray[i].style.display != 'none') {
          divArray[i].style.display = 'none';
        }
        else {
          divArray[i].style.display = '';
        }
      }
    }
  }  // end function toggle()
  </script>
  <form>
  <input type="checkbox" checked onClick="toggle('nj');"> NJ
  <input type="checkbox" checked onClick="toggle('ny');"> NY
  <input type="checkbox" checked onClick="toggle('ct');"> CT
  <BR>
  <input type="checkbox" checked onClick="toggle('cheap');"> Cheap
  <input type="checkbox" checked onClick="toggle('moderate');"> Moderate
  <input type="checkbox" checked onClick="toggle('expensive');"> Expensive
  <BR>
  <input type="checkbox" checked onClick="toggle('burgers');"> Burgers
  <input type="checkbox" checked onClick="toggle('pizza');"> Pizza
  <input type="checkbox" checked onClick="toggle('sandwiches');"> Sandwiches
  <BR>
  </form>
  <div id="non-descript">Places to Eat:</div>
  <BR>
  <!-- using underscore '_' for ease of use -->
  <div id="_nj_cheap_burgers_">NJ Place [Cheap Burger]</div>
  <div id="_nj_moderate_burgers_">NJ Place [Moderate Burgers]</div>
  <div id="_nj_expensive_burgers_">NJ Place [Expensive Burgers]</div>
  <div id="_nj_cheap_pizza_">NJ Place [Cheap Pizza]</div>
  <div id="_nj_moderate_pizza_">NJ Place [Moderate Pizza]</div>
  <div id="_nj_expensive_pizza_">NJ Place [Expensive Pizza]</div>
  <div id="_nj_cheap_sandwiches_">NJ Place [Cheap Sandwitches]</div>
  <div id="_nj_moderate_sandwiches_">NJ Place [Moderate Sandwitches]</div>
  <div id="_nj_expensive_sandwiches_" >NJ Place [Expensive Sandwitches]</div>
  <div id="_ny_cheap_burgers_">NY Place [Cheap Burger]</div>
  <div id="_ny_moderate_burgers_">NY Place [Moderate Burgers]</div>
  <div id="_ny_expensive_burgers_">NY Place [Expensive Burgers]</div>
  <div id="_ny_cheap_pizza_">NY Place [Cheap Pizza]</div>
  <div id="_ny_moderate_pizza_">NY Place [Moderate Pizza]</div>
  <div id="_ny_expensive_pizza_">NY Place [Expensive Pizza]</div>
  <div id="_ny_cheap_sandwiches_">NY Place [Cheap Sandwitches]</div>
  <div id="_ny_moderate_sandwiches_">NY Place [Moderate Sandwitches]</div>
  <div id="_ny_expensive_sandwiches_">NY Place [Expensive Sandwitches]</div>
  <div id="_ct_cheap_burgers_">CT Place [Cheap Burger]</div>
  <div id="_ct_moderate_burgers_">CT Place [Moderate Burgers]</div>
  <div id="_ct_expensive_burgers_">CT Place [Expensive Burgers]</div>
  <div id="_ct_cheap_pizza_">CT Place [Cheap Pizza]</div>
  <div id="_ct_moderate_pizza_">CT Place [Moderate Pizza]</div>
  <div id="_ct_expensive_pizza_">CT Place [Expensive Pizza]</div>
  <div id="_ct_cheap_sandwiches_">CT Place [Cheap Sandwitches]</div>
  <div id="_ct_moderate_sandwiches_">CT Place [Moderate Sandwitches]</div>
  <div id="_ct_expensive_sandwiches_">CT Place [Expensive Sandwitches]</div>
  <BR>
  </body>
</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

MArun25039 0 Newbie Poster · Answer 1 · 2012-08-03T20:16:59+00:00

Thank you so much for all your help. It is truly appreciated.

Taywin 312 Posting Virtuoso · Answer 2 · 2012-08-03T23:45:48+00:00

Please mark it as solved. Also, sorry for the earlier code which contains bugs because I didn't think through thoroughly. You already got the correct version anyway.

Hide or Show Sets of Divs using a Checkboxes

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers