Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Check_all - uncheck_all function

Posted on 2011-03-17
24
Medium Priority
?
412 Views
Last Modified: 2012-05-11
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
Comment
Question by:Panos
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 6
  • 5
  • +1
24 Comments
 
LVL 16

Expert Comment

by:Steve Krile
ID: 35155901
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
 
LVL 2

Author Comment

by:Panos
ID: 35155916
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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
LVL 2

Author Comment

by:Panos
ID: 35156110
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
 
LVL 82

Expert Comment

by:leakim971
ID: 35156160
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
 
LVL 16

Expert Comment

by:Steve Krile
ID: 35156177
Quick comment - why have you indicated jquery on this post if you want to use straight javascript?
0
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 35156188
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
 
LVL 20

Assisted Solution

by:chaitu chaitu
chaitu chaitu earned 400 total points
ID: 35156250
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
 
LVL 2

Author Comment

by:Panos
ID: 35156293
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
 
LVL 16

Expert Comment

by:Steve Krile
ID: 35156300
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
 
LVL 2

Author Comment

by:Panos
ID: 35156308
chaituu
Your last posted code is working
0
 
LVL 2

Author Comment

by:Panos
ID: 35156318
skrile
I did miss your comment!!
I just saw it
0
 
LVL 2

Author Comment

by:Panos
ID: 35156363
skrile please don't use the show-hide function.keep all "show"
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 800 total points
ID: 35156447
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
 
LVL 16

Expert Comment

by:Steve Krile
ID: 35156449
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
 
LVL 2

Author Comment

by:Panos
ID: 35156559
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
 
LVL 2

Author Comment

by:Panos
ID: 35156607
Sorry leakim971.
I had to use the table tags too.Now it is working
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35156637
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
 
LVL 82

Expert Comment

by:leakim971
ID: 35156642
ok, pheeeww ;^^
0
 
LVL 16

Assisted Solution

by:Steve Krile
Steve Krile earned 800 total points
ID: 35156746
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
 
LVL 2

Author Comment

by:Panos
ID: 35156859
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
 
LVL 82

Expert Comment

by:leakim971
ID: 35156894
take your time, there's no fire or earthquake...
0
 
LVL 2

Author Closing Comment

by:Panos
ID: 35156895
Thank you again.
regards
panos
0
 
LVL 2

Author Comment

by:Panos
ID: 35156903
Not yet.............
Hahaha
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

661 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