• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 428
  • Last Modified:

Check_all - uncheck_all function

Hello experts.
I need help to configure some check box functions.
I have a main check box.
1.If i check this  a check_box group must be checked.
2.If all check boxes from one checkbox group are unchecked than the main checkbox must be uncheck too.
3.If main checkbox and groupcheckboxes are both unchecked and i check one groupcheckbox than the main checkbox must be checked too.

I created a test form that is similar to my original form.In this form that what i can't change are the names of the main and group checkboxes.
I can use only the id's to handle this.
So i use the state_1 and state_2 id using the current_row (from the output query) and the table_1 and table_2 id (the groupcheckbox holder).
Below is my code.
Any help?
 
<form method="post" action="">
<table>
<tr>
 <td valign="top">Main1</td>
 <td align="center" valign="top">
  <input type="CheckBox"   name="ShowThese" value="1" id="state_1">
 </td>
 <td>
<table id="table_1">
<tr>
<td>
<div align="center">Group1</div>
</td>
<td width="20%">
<div align="center">show</div>
</td>
</tr>
<tr>
<td>Test1</td>
<td width="20%"><input type="CheckBox"  name="ShowTheseSub" value="1"></td>
</tr>
<tr>
<td>Test2</td>
<td width="20%"><input type="CheckBox" name="ShowTheseSub" value="2"></td>
</tr>
</table>
 </td>
</tr>
<tr>
  <td valign="top">Main2</td>
  <td align="center" valign="top">
  <input type="CheckBox" name="ShowThese" value="2" id="state_2">
  </td>
  <td>
  <table id="table_2">
  <tr>
  <td><div align="center">Group2</div>
  </td>
  <td width="20%">
  <div align="center" >show</div>
  </td>
  </tr>
  <tr>
  <td>Test3</td>
  <td width="20%"><input type="CheckBox"  name="ShowTheseSub" value="13"></td>
  </tr>
  <tr>
  <td>Test4</td>
  <td width="20%"><input type="CheckBox"  name="ShowTheseSub" value="14"></td>
  </tr>
  </table>
  </td>
</tr>

</table>
</form>

Open in new window

0
Panos
Asked:
Panos
  • 11
  • 6
  • 5
  • +1
3 Solutions
 
Steve KrileCommented:
I've reworked your logic a bit and am using jquery to handle the javascript.

New logic:

1.  Hide all the sub groups by default through css.
2.  When a group is clicked, show the sub group.
3.  When a group is unclicked, hide the sub group and uncheck all the sub group boxes.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery Check Boxes</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
	<style type="text/css">
		ul {padding:0;margin:0;list-style-type:none;}
		.subCheck {display:none;}
	</style>
	<script type="text/javascript">

	    $(document).ready(function () {
	        
            //when a main group checkbox is checked
            $("ul.choices li input[type=checkbox]").click(function () {
                
	            if ($(this).attr("checked")) {
	                //if the box is checked, show the sub group
                    $(this).siblings("fieldset").show();
                } else {
                    //if the box is unchecked, hide the subgroup
                    $(this).siblings("fieldset").hide();

                    //uncheck all the boxes of the sub group
	                $(this).siblings("fieldset").find("input[type=checkbox]").each(function () {
	                    $(this).attr("checked", "");
	                })
	            }
	        })
	    });


	
	</script>
</head>
<body>
<form method="post" action="">
<ul class="choices">
    <li>
        <label>Main 1</label><input type="checkbox" value="1" id="state_1" />
        <fieldset class="subCheck">
            <legend>Group 1</legend>
            <ul>
                <li><label>Test 1<input type="checkbox" id="state_1_1" value="1" /></label></li>
                <li><label>Test 2<input type="checkbox" id="state_1_2" value="2" /></label></li>
            </ul>
        </fieldset>
    </li>
    <li>
        <label>Main 2</label><input type="checkbox" value="1" id="state_2" />
        <fieldset class="subCheck">
            <legend>Group 2</legend>
            <ul>
                <li><label>Test 3<input type="checkbox" id="state_2_3" value="3" /></label></li>
                <li><label>Test 4<input type="checkbox" id="state_2_4" value="4" /></label></li>
            </ul>
        </fieldset>
    </li>

</ul>

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

Open in new window

0
 
PanosAuthor Commented:
Hi.
It seems that these two links are what i need.
I will try it myself and i hope i get it work.I will come back shortly
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.

 
PanosAuthor Commented:
Now to the script below.
1).I need something like:
onclick="setCheckboxes('group_1', this.checked);" where the 1 should be a variable  (in my case the currentrow .

2)Checking on id="all"  the checkbox with class="group11" is been checked too.


<script language="javascript">
	function setCheckboxes(groupName, state) {
		var inputs = document.getElementsByTagName("input");
		for(var i=0;i<inputs.length;i++) {
			if(inputs[i].getAttribute("class") && inputs[i].getAttribute("class").indexOf("group1")>=0) {
				inputs[i].checked = state;
			}
		}
	}
</script>

<input type="checkbox" id="all" onclick="setCheckboxes('group1', this.checked);" />Check all<br />
<input type="checkbox" id="cb1" name="cb1" class="group1" />One<br />
<input type="checkbox" id="cb2" name="cb2" class="group1" />Two<br />
<input type="checkbox" id="cb3" name="cb3" class="group1" />Three<br />
<input type="checkbox" id="cb4" name="cb4" class="group1" />Four<br />
<input type="checkbox" id="cb5" name="cb5" class="group1" />Five<br />
<br />
<input type="checkbox" id="all" onclick="setCheckboxes('group2', this.checked);" />Check all<br />
<input type="checkbox" id="cb1" name="cb1" class="group2" />One<br />
<input type="checkbox" id="cb2" name="cb2" class="group2" />Two<br />
<input type="checkbox" id="cb3" name="cb3" class="group2" />Three<br />
<input type="checkbox" id="cb4" name="cb4" class="group2" />Four<br />
<input type="checkbox" id="cb5" name="cb5" class="group11" />Five<br />

Open in new window

0
 
leakim971PluritechnicianCommented:
for example : setCheckboxes(this.className, this.checked);


<script language="javascript">
	function setCheckboxes(groupName, state) {
		var inputs = document.getElementsByTagName("input");
		for(var i=0;i<inputs.length;i++) {
			if(inputs[i].getAttribute("class") && inputs[i].getAttribute("class").indexOf("group1")>=0) {
				inputs[i].checked = state;
			}
		}
	}
</script>

<input type="checkbox" class="group1" id="all" onclick="setCheckboxes(this.className, this.checked);" />Check all<br />
<input type="checkbox" id="cb1" name="cb1" class="group1" />One<br />
<input type="checkbox" id="cb2" name="cb2" class="group1" />Two<br />
<input type="checkbox" id="cb3" name="cb3" class="group1" />Three<br />
<input type="checkbox" id="cb4" name="cb4" class="group1" />Four<br />
<input type="checkbox" id="cb5" name="cb5" class="group1" />Five<br />
<br />
<input type="checkbox" class="group2" id="all" onclick="setCheckboxes(this.className, this.checked);" />Check all<br />
<input type="checkbox" id="cb1" name="cb1" class="group2" />One<br />
<input type="checkbox" id="cb2" name="cb2" class="group2" />Two<br />
<input type="checkbox" id="cb3" name="cb3" class="group2" />Three<br />
<input type="checkbox" id="cb4" name="cb4" class="group2" />Four<br />
<input type="checkbox" id="cb5" name="cb5" class="group11" />Five<br />

Open in new window

0
 
Steve KrileCommented:
Quick comment - why have you indicated jquery on this post if you want to use straight javascript?
0
 
chaitu chaituCommented:
function setCheckboxes(groupName, state) {
		var inputs = document.getElementsByTagName("input");
		for(var i=0;i<inputs.length;i++) {
			if(inputs[i].className == "group1") 
			{
								inputs[i].checked = state;
			}
		}
	}

Open in new window

0
 
chaitu chaituCommented:
function setCheckboxes(groupName, state) {
		var inputs = document.getElementsByTagName("input");
		for(var i=0;i<inputs.length;i++) {
			if(inputs[i].className == groupName) 
			{
				
				inputs[i].checked = state;
			}
		}
	}

Open in new window

0
 
PanosAuthor Commented:
1)leakim971
The result is the same
2)skrile
I had in mind to use a table id where all the checkboxgroup.I thought it was easy to handle this wit jquery using the 'element'.
Sorry if i was wrong.
3)chaituu
The result is the same
0
 
Steve KrileCommented:
Oh, it is easy.  But I haven't heard from you regarding my first code sample.  If that's the wrong direction, I'll bow out of this one.
0
 
PanosAuthor Commented:
chaituu
Your last posted code is working
0
 
PanosAuthor Commented:
skrile
I did miss your comment!!
I just saw it
0
 
PanosAuthor Commented:
skrile please don't use the show-hide function.keep all "show"
0
 
leakim971PluritechnicianCommented:
Without jQuery :


<script language="javascript">
	function setCheckboxes(checkbox) {

var state = checkbox.checked;
var myrow = checkbox.parentNode.parentNode;
 
var rows = document.getElementsByTagName("tr");
for(var index=0;index<rows.length;index++) {
   if( rows[index] == myrow ) {
       break;
   }
}
index++;
		var inputs = document.getElementsByTagName("input");
		for(var i=0;i<inputs.length;i++) {



if(inputs[i].getAttribute("class") && inputs[i].getAttribute("class").indexOf("group" + index)>=0) { // we use the index here



				inputs[i].checked = state;
			}
		}
	}
</script>

Open in new window


with :

<input type="checkbox" id="all" onclick="setCheckboxes(this);" />Check all<br />

Open in new window

0
 
Steve KrileCommented:
This should get you pretty close.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery Check Boxes</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
	<style type="text/css">
		ul {padding:0;margin:0;list-style-type:none;}
		
	</style>
	<script type="text/javascript">

	    $(document).ready(function () {

	        //when a main group checkbox is checked
	        $("ul.choices li input[type=checkbox]").click(function () {

	            if (!$(this).attr("checked")) {
	                //if the box is unchecked, uncheck the subgroup
	                $(this).siblings("fieldset").find("input[type=checkbox]").each(function () {
	                    $(this).attr("checked", "");
	                })
	            }
	        })

	        //when a sub checkbox is checked
	        $("fieldset.subCheck ul li input[type=checkbox]").click(function () {
	            //check the checked status of all the siblings in this group.  If they are all unchecked, make sure the parent checkbox is unchecked
	            var oneChecked = false;
	            $("fieldset.subCheck ul li input[type=checkbox]").each(function () {
	                if ($(this).attr("checked")) {
	                    oneChecked = true;
	                }
	            })

	            //set the value of the parent check box according to whether any children are checked
	            $(this).parents("fieldset").parent("li").children("input[type=checkbox]").attr("checked", (oneChecked) ? "checked" : "");
	        })
	    });


	
	</script>
</head>
<body>
<form method="post" action="">
<ul class="choices">
    <li>
        <label>Main 1</label><input type="checkbox" value="1" id="state_1" />
        <fieldset class="subCheck">
            <legend>Group 1</legend>
            <ul>
                <li><label>Test 1<input type="checkbox" id="state_1_1" value="1" /></label></li>
                <li><label>Test 2<input type="checkbox" id="state_1_2" value="2" /></label></li>
            </ul>
        </fieldset>
    </li>
    <li>
        <label>Main 2</label><input type="checkbox" value="1" id="state_2" />
        <fieldset class="subCheck">
            <legend>Group 2</legend>
            <ul>
                <li><label>Test 3<input type="checkbox" id="state_2_3" value="3" /></label></li>
                <li><label>Test 4<input type="checkbox" id="state_2_4" value="4" /></label></li>
            </ul>
        </fieldset>
    </li>

</ul>

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

Open in new window

0
 
PanosAuthor Commented:
1)leakim971
Your code is not working for the second group

2)skrile
Your code is working fine.Please add the check all and uncheck all function for each group.
0
 
PanosAuthor Commented:
Sorry leakim971.
I had to use the table tags too.Now it is working
0
 
leakim971PluritechnicianCommented:
a group by row ?

>1).I need something like:
>onclick="setCheckboxes('group_1', this.checked);" where the 1 should be a variable  (in my case the currentrow .

else instead i++ we may need to use i+=3 for example
0
 
leakim971PluritechnicianCommented:
ok, pheeeww ;^^
0
 
Steve KrileCommented:
Here's the added Check All functionality

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery Check Boxes</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
	<style type="text/css">
		ul {padding:0;margin:0;list-style-type:none;}
		
	</style>
	<script type="text/javascript">

	    $(document).ready(function () {

	        //when a main group checkbox is checked
	        $("ul.choices li input[type=checkbox]").click(function () {

	            if (!$(this).attr("checked")) {
	                //if the box is unchecked, uncheck the subgroup
	                $(this).siblings("fieldset").find("input[type=checkbox]").each(function () {
	                    $(this).attr("checked", "");
	                })
	            }
	        })

	        $("ul.choices li a").click(function () {
	            //use the text of the link to determine the state of whether all things are checked or not.
	            var allChecked = ($(this).text() == "check all");

	            $(this).parents("fieldset").find("input[type=checkbox]").attr("checked", (allChecked) ? "checked" : "");
	            $(this).parents("fieldset").siblings("input[type=checkbox]").attr("checked", (allChecked) ? "checked" : "");
	            $(this).text((allChecked) ? "clear" : "check all" )

	        })

	        //when a sub checkbox is checked
	        $("fieldset.subCheck ul li input[type=checkbox]").click(function () {
	            //check the checked status of all the siblings in this group.  If they are all unchecked, make sure the parent checkbox is unchecked
	            var oneChecked = false;
	            $("fieldset.subCheck ul li input[type=checkbox]").each(function () {
	                if ($(this).attr("checked")) {
	                    oneChecked = true;
	                }
	            })

	            //set the value of the parent check box according to whether any children are checked
	            $(this).parents("fieldset").parent("li").children("input[type=checkbox]").attr("checked", (oneChecked) ? "checked" : "");
	        })
	    });


	
	</script>
</head>
<body>
<form method="post" action="">
<ul class="choices">
    <li>
        <label>Main 1</label><input type="checkbox" value="1" id="state_1" />
        <fieldset class="subCheck">
            <legend>Group 1&nbsp;<a href="#">check all</a></legend>
            <ul>
                <li><label>Test 1<input type="checkbox" id="state_1_1" value="1" /></label></li>
                <li><label>Test 2<input type="checkbox" id="state_1_2" value="2" /></label></li>
            </ul>
        </fieldset>
    </li>
    <li>
        <label>Main 2</label><input type="checkbox" value="1" id="state_2" />
        <fieldset class="subCheck">
            <legend>Group 2&nbsp;<a href="#">check all</a></legend>
            <ul>
                <li><label>Test 3<input type="checkbox" id="state_2_3" value="3" /></label></li>
                <li><label>Test 4<input type="checkbox" id="state_2_4" value="4" /></label></li>
            </ul>
        </fieldset>
    </li>

</ul>

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

Open in new window

0
 
PanosAuthor Commented:
OK thank skrile.
Your code is working but i ment to check and uncheck the main checkboxes and get the show hide for the checkbox groups.(it was in the question).Never mind.I did get enough help for this case.

thank you all for your great help.
Sorry for my mistaces but i was trying to test your solutions  and reply my results very fast .
0
 
leakim971PluritechnicianCommented:
take your time, there's no fire or earthquake...
0
 
PanosAuthor Commented:
Thank you again.
regards
panos
0
 
PanosAuthor Commented:
Not yet.............
Hahaha
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 11
  • 6
  • 5
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now