?
Solved

Form Drop down selection places checks in multiple checkboxes, changing with each drop down selection

Posted on 2006-11-21
11
Medium Priority
?
700 Views
Last Modified: 2010-04-06
I have hopefully a simple question, but haven't found the answer.

I am looking to create "Groups" in a drop down list which corruspond to selected checkboxes, which change when the user selects a different group from the dropdown.

Example

<html>
<head>
</head>
<body>
<form>

    <select name="type" id="dd">
      <option>Select group</option>
      <option></option>
<option>Group number one</option>
<option>Group number two</option>
<option>Group number three</option>
<option>Group number Four</option>
<option>Group number five</option>
<option>Group number six</option>
<option>Group number seven</option>
</select><p>

&nbsp; <input type="checkbox" name="reports" value="group1">Report 1<br>
&nbsp; <input type="checkbox" name="reports" value="group2">Report 2<br>
&nbsp; <input type="checkbox" name="reports" value="group3">Report 3<br>

&nbsp; <input type="checkbox" name="reports" value="group">Report 4<br>
&nbsp; <input type="checkbox" name="reports" value="">Report 5<br>
&nbsp; <input type="checkbox" name="reports" value="">Report 6<br>
&nbsp; <input type="checkbox" name="reports" value="">Report 7<br>

     </p>

</form>
</body>
</html>


Group one from drop down may consist of  Report 1, Report 4, and Report 5
Group two from drop down may consist of Report 3, Report 4, and Report 7

How would I do that?

0
Comment
Question by:mrslate1
  • 5
  • 4
  • 2
11 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17988705
mrslate1,

I'm not exactly sure what you want.  Do you want the select list to be grouped (i.e. split in subsections)?  That isn't supported by browsers, with the exception of Safari I believe but I haven't used it.

If that isn't it then are you asking about using script to change checkboxes when an option (i.e. group) is selected from the list?  That can be done with the onchange event in the select tag to read the value and then checkboxes.  This would use Javascript.  If this is what you want then I can provide an example.

If neither is correct then please clarify.  Let me know if you have any questions or need more information.

b0lsc0tt
0
 

Author Comment

by:mrslate1
ID: 17990020
Thanks for the reply,

Yes I am looking for some sort of Javascript that the certian check boxes to be selected depending on which drop down selection is made.

This is for mock up purposes as I know this is a database thing, which will enable the groupings to be made.

So the second option you described is the one I am looking for.  An example of that would be great.

Thanks for your help.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17992133
You select tag is the easy part.  Add an onchange event to call the function.  It passes the selected value to the function.

<select name="type" id="dd" onchange="checkBoxes(this.value);">

Now depending on the way the checkboxes are set up and how they relate to the select list this can be really easy or a little more difficult.  I'll give a basic example and assume that the value from the select list equals the unique id for one checkbox.  This function would check that box.

function checkBoxes(sel) {
  document.getElementById(sel).checked=true;
}

That is the simplest scenario.  If you still need help please let me know how the select relates to the boxes.  I'll need details of the html for the list and the boxes.  It will probably be easier if each checkbox has a unique id attribute assigned.

bol
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:mrslate1
ID: 17993280
What I am actually doing is creating more then one  Grouping for the check boxes for printing purposes. But I do not want to go that deep, just have the ablilty to select one goup from the drop down list, and three or four or five check boxes will be automatically checked. (Up to seven) Then the next drop down group will have only three boxes checked, and so on.

A user may want one group of 1,3,5 boxes checked, (Group 1) and another grouping of 2,3,4 checked (Group 2) for printing purposes. A user can have up to 7 groupings.

Hope this makes sense, and thanks for your help.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 17993920
b0lsc0tt: for maximum compatibility use
onchange="checkBoxes(this.value)
instead of
onchange="checkBoxes(this.options[this.selectedIndex].value)

or better
onchange="checkBoxes(this)
and have checkBoxes function use the passed select and its .form attribute
0
 

Author Comment

by:mrslate1
ID: 17996260
Sorry for being ignorant, but what would this look like put together? Say if I only had 3 check boxes for a simpler example?

For instance group one is check boxes 1 and 3 and group 2 is 1, 2, 3?

<html>
<head>
</head>
<body>
<form>

    <select name="type" id="dd">
     <option>Select group</option>
     <option></option>
<option>Group number one</option>
<option>Group number two</option>
<option>Group number three</option>
</select><p>

&nbsp; <input type="checkbox" name="reports" value="1">Report 1<br>
&nbsp; <input type="checkbox" name="reports" value="2">Report 2<br>
&nbsp; <input type="checkbox" name="reports" value="3">Report 3<br>

</form>
</body>
</html>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 17996359
<html>
<head>
<script>
function checkEm(theSel) {
  var val = theSel.options[theSel.selectedIndex].value;
  for (var i=0;i<theSel.form.elements.length;i++) {
    if (theSel.form.elements[i].name=='reports') {
      theSel.form.elements[i].checked=(val==theSel.form.elements[i].value)?true:false;
    }
  }
}
</script>
</head>
<body onLoad="checkEm(document.forms[0].elements["type"])>
<form>

    <select name="type" id="dd" onChange="checkEm(this)">
     <option value="">Select group</option>
<option value="1">Group number one</option>
<option value="2">Group number two</option>
<option value="3">Group number three</option>
</select><p>

&nbsp; <input type="checkbox" name="reports" value="1">Report 1<br>
&nbsp; <input type="checkbox" name="reports" value="2">Report 2<br>
&nbsp; <input type="checkbox" name="reports" value="3">Report 3<br>

</form>
</body>
</html>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 17996364
oops give me another minute
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 17996398
<html>
<head>
<script>
function checkEm(theSel) {
  var vals = "|"+theSel.options[theSel.selectedIndex].value+"|";
  for (var i=0;i<theSel.form.elements.length;i++) {
    if (theSel.form.elements[i].name=='reports') {
      var val = "|"+theSel.form.elements[i].value+"|";
      theSel.form.elements[i].checked=(vals.indexOf(val)!=-1)?true:false;
    }
  }
}
</script>
</head>
<body onLoad="checkEm(document.forms[0].elements["type"])>
<form>

    <select name="type" id="dd" onChange="checkEm(this)">
     <option value="">Select group</option>
<option value="1|3">Group number one</option>
<option value="1|2|3">Group number two</option>
<option value="3">Group number three</option>
</select><p>

&nbsp; <input type="checkbox" name="reports" value="1">Report 1<br>
&nbsp; <input type="checkbox" name="reports" value="2">Report 2<br>
&nbsp; <input type="checkbox" name="reports" value="3">Report 3<br>

</form>
</body>
</html>
0
 

Author Comment

by:mrslate1
ID: 17997646
This was exactly what I was looking for. I did have to close the " on this line and change the " to a '

<body onLoad="checkEm(document.forms[0].elements["type"])>

to

<body onLoad="checkEm(document.forms[0].elements['type'])">

as I was getting a syntax error message, but after that it works perfectly!


Thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 18001528
YW - sorry about the quotes - the statement was put there as an afterthought to allow the form to reset/update after reload
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question