Solved

Check_all - uncheck_all function

Posted on 2011-03-17
24
391 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
  • 11
  • 6
  • 5
  • +1
24 Comments
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
0
 
LVL 16

Expert Comment

by:Steve Krile
Comment Utility
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
Comment Utility
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
 
LVL 2

Author Comment

by:Panos
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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 100 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
chaituu
Your last posted code is working
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
skrile
I did miss your comment!!
I just saw it
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 2

Author Comment

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

Accepted Solution

by:
leakim971 earned 200 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Sorry leakim971.
I had to use the table tags too.Now it is working
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
Comment Utility
ok, pheeeww ;^^
0
 
LVL 16

Assisted Solution

by:Steve Krile
Steve Krile earned 200 total points
Comment Utility
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
Comment Utility
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
Comment Utility
take your time, there's no fire or earthquake...
0
 
LVL 2

Author Closing Comment

by:Panos
Comment Utility
Thank you again.
regards
panos
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
Not yet.............
Hahaha
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

771 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now