Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 414
  • Last Modified:

Select/Unselect "ALL" Checkbox when Other Checkboxes Selected/Unselected

Hello Experts,

I am working on a search form to help police search through our database of missing persons.

One section of the form is "Hair Color" - which features checkboxes for:
1> All
2> Brown
3> Auburn
etc.....

I need a way to have "ALL" be checked if NONE of the specific color boxes is picked, and the have "ALL" be unchecked if ANY of the specific color boxes is checked.

Any ideas?

Thanks,
Eric
0
epaschal
Asked:
epaschal
  • 2
2 Solutions
 
thirdCommented:
try,

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
  function toggle(obj){
    obj.chkAll.checked = true;
    for(var i=0; i < obj.length; i++){
        if(obj.elements[i].type == 'checkbox' && obj.elements[i].name != 'chkAll'){
          if(obj.elements[i].checked){
              obj.chkAll.checked = false;
              break;
            }
        }
      }
  }
</script>
</head>
<body>
<form name="form1" method=post action="" onsubmit="">
<input type="checkbox" name="chkAll" checked>All<br><br>
<input type="checkbox" name="chkBrown" onclick="toggle(this.form);">Brown<br>
<input type="checkbox" name="chkBlue" onclick="toggle(this.form);">Blue<br>
<input type="checkbox" name="chkGreen" onclick="toggle(this.form);">Green
</form>
</body>
</html>
0
 
BatalfCommented:
Another example :


<html>
<head>
<script type="text/javascript">
function checkAll(checkObj,prefix){
   
    var els = document.getElementsByTagName('INPUT');
    for(var no=0;no<els.length;no++){
        if(els[no].type.toLowerCase()=='checkbox'){
            if(els[no].name.indexOf(prefix)>=0){
                els[no].checked=checkObj.checked;
            }
        }
    }
}

function singleCheck(formObj,prefix){
    var uncheckedFound=false;
    var els = document.getElementsByTagName('INPUT');
    for(var no=0;no<els.length;no++){
        if(els[no].type.toLowerCase()=='checkbox'){
            if(els[no].name.indexOf(prefix)>=0){
                if(!els[no].checked){
                    uncheckedFound=true;
                    break;
                }
            }
        }
    }

    formObj.colorALL.checked = !uncheckedFound;
   
}

</script>
<style type="text/css">
.heading,.heading td{
    background-color:#000066;
    color:#FFFFFF;
}
</style>
</head>
<body>
<form name="myForm">

<table cellpadding="0" cellspacing="0">
    <tr class="heading">
        <td>Color</td><td><input type="checkbox" name="colorALL" onclick="checkAll(this,'color_')"</td>
    </tr>
    <tr>
        <td>Brown</td>
        <td><input type="checkbox" name="color_brown" onclick="singleCheck(this.form,'color_')"></td>
    </tr>
    <tr>
        <td>Blue</td>
        <td><input type="checkbox" name="color_blue" onclick="singleCheck(this.form,'color_')"></td>
    </tr>
    <tr>
        <td>Auburn</td>
        <td><input type="checkbox" name="color_auburn" onclick="singleCheck(this.form,'color_')"></td>
    </tr>
</table>

</form>
</body>
0
 
epaschalAuthor Commented:
Hi Third,

This looks like just what I need.

I would like to use this on SEVERAL checkbox sections on the form, since it works so well on this one section.  

What do I need to do to "segment" each group of checkboxes, as far as this script is concerned? Just like my initial question, each section has the "All" option.

Thanks,
Eric
0
 
epaschalAuthor Commented:
Disregard that, I figured it out. Thanks again!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now