asked on

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

leakim971

Check this thread :
https://www.experts-exchange.com/questions/26858485/checking-box-in-group-automatically-checks-group-checkbox.html?cid=1131&anchorAnswerId=35019679#a35019679
https://www.experts-exchange.com/questions/26439503/checkbox-'all'.html?cid=1131&anchorAnswerId=33563412#a33563412

Steve Krile

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

Panos

ASKER

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

Panos

ASKER

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

leakim971

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

Steve Krile

Quick comment - why have you indicated jquery on this post if you want to use straight javascript?

chaitu chaitu

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

SOLUTION

chaitu chaitu

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Panos

ASKER

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

Steve Krile

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.

Panos

ASKER

chaituu
Your last posted code is working

Panos

ASKER

skrile
I did miss your comment!!
I just saw it

Panos

ASKER

skrile please don't use the show-hide function.keep all "show"

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Steve Krile

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

Panos

ASKER

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.

Panos

ASKER

Sorry leakim971.
I had to use the table tags too.Now it is working

leakim971

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

leakim971

ok, pheeeww ;^^

SOLUTION

Steve Krile

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Panos

ASKER

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 .

leakim971

take your time, there's no fire or earthquake...

Panos

ASKER

Thank you again.
regards
panos

Panos

ASKER

Not yet.............
Hahaha