Member Avatar for MArun25039

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>
  • 2 Contributors
  • 3 Replies
  • 2K Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Taywin
Member Avatar for Taywin

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>
Member Avatar for MArun25039

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

Member Avatar for Taywin

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.

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.