parent checkbox makes children checkboxes selected

F

feanor

I need to select children checkboxes when selecting the parent one.
This is my function:

function SelectChildrens(checkbox_name){
form = document.forms[0];
Sname = checkbox_name.split("-");
for (i=0;i<form.elements.length;i++){
THATname = form.elements.name.split("-");
if (Sname.length==1){
if (THATname[0]==Sname[0]){
form.elements.checked=!form.elements.checked;
}
}
if (Sname.length==2){
if (THATname[1]==Sname[1]){
form.elements.checked=!form.elements.checked;
}
}
}//endof for
}

I've got parent checkbox which is:
<input type=checkbox name=FISH-FILTERS
onclick="SelectChildrens(this.name)">
and childrens like:
<input type=checkbox name="products_id[]" value="2">
<input type=checkbox name="products_id[]" value="3">
<input type=checkbox name="products_id[]" value="4">
<input type=checkbox name="products_id[]" value="5">

what can I add to children checkboxes so that the function works fine ?

Thanks for any advices.
Kris
 
R

RobG

I need to select children checkboxes when selecting the parent one.
This is my function:

function SelectChildrens(checkbox_name){
form = document.forms[0];
Click to expand...

If you pass a reference to the checkbox that is clicked on it is
easier to get the form (see below).
Sname = checkbox_name.split("-");
Click to expand...

I can't work out what you are trying to do here, so I've posted a
completely new function below. You have put the onclick on an
element with a name that is nothing like that of the 'childrens'
checkboxes.
for (i=0;i<form.elements.length;i++){
THATname = form.elements.name.split("-");
if (Sname.length==1){
if (THATname[0]==Sname[0]){
form.elements.checked=!form.elements.checked;
}
}
if (Sname.length==2){
if (THATname[1]==Sname[1]){
form.elements.checked=!form.elements.checked;
}
}
}//endof for
}

I've got parent checkbox which is:
<input type=checkbox name=FISH-FILTERS
onclick="SelectChildrens(this.name)">
Click to expand...


Pass a reference to the element rather than its name:

onclick="SelectChildrens(this)">
and childrens like:
<input type=checkbox name="products_id[]" value="2">
<input type=checkbox name="products_id[]" value="3">
<input type=checkbox name="products_id[]" value="4">
<input type=checkbox name="products_id[]" value="5">
Click to expand...

Start with this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>blah</title>

<script type="text/JavaScript">

function SelectChildrens(x){
var el, els = x.form.elements;
var m, n = x.name.split('_')[1];
for(var i=0, j=els.length; i<j; i++){
el = els;
if ('checkbox' == el.type) {
if (el.name && ( m = el.name.split('_')[1]) && m == n ){
el.checked = x.checked;
}
}
}
}

</script>
</head>
<body>

<form action="">
<p>Selecting this checkbox will select all the other checkboxes
<br>
<input type="checkbox" name="products_id[1]"
onclick="SelectChildrens(this)">select the 1's<br>

<input type=checkbox name="products_id[1]" value="2">1 - 2<br>
<input type=checkbox name="products_id[1]" value="3">1 - 3<br>

<input type="checkbox" name="products_id[2]"
onclick="SelectChildrens(this)">select the 2's<br>

<input type=checkbox name="products_id[2]" value="4">2 - 4<br>
<input type=checkbox name="products_id[2]" value="5">2 - 5<br>
</p>
</form>
</body>
</html>
 
M

Matt Kruse

I need to select children checkboxes when selecting the parent one.
Click to expand...

I have a general-purpose reusable library that handles this, if you would
like to check it out:

http://www.javascripttoolbox.com/checkboxgroup/

It is more code than is required to handle your specific case (although it
is less than 4k), but it is more generalized and may come in handy in other
similar situations or in your current situation if the requirements change
slightly.
 
R

RobB

I need to select children checkboxes when selecting the parent one.
Click to expand...

Is a checkbox the intuitive device for - setting checkboxes?

Maybe yes, maybe no...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

..master-before, .master-after {
width: 102px;
font: 11px tahoma;
margin: 2px 0;
}
#d1 {
width: 100px;
margin-bottom: 2px;
padding-bottom: 2px;
background: moccasin;
border: 1px black solid;
}
#d2 {
width: 100px;
background: pink;
border: 1px black solid;
}
ul {
font: 11px tahoma;
list-style-type: none;
}
input.normal {
width: 100px;
font: 11px tahoma;
text-align: center;
margin: 3px 0;
background: gainsboro;
border: 1px black solid;
}

</style>
<script type="text/javascript">

//~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ //
var gangs = [];
gangs.add = function()
{
for (var a = 0, l = arguments.length; a < l; ++a)
this.push(new GangCheck(arguments[a]));
}
gangs.init = function()
{
for (var i = 0, l = this.length, grp; i < l; ++i)
if ((grp = this.grp) && grp[0].onclick)
grp[0].onclick();
}
//~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ //

function GangCheck(masterName)
{

this.set = function()
{
var el, i = 0,
bWhich = (this.value == 'check all');
while (el = this.grp[i++])
el.checked = bWhich;
this.value = bWhich ? 'uncheck all' : 'check all';
}

this.chk = function ()
{
var el, i = 0,
O_checked = true, n_checked = 0,
els = this.form.elements,
grp = els[this.name];
while (el = grp[i++])
{
if (el.checked)
{
O_checked = false;
n_checked++;
}
}
if (O_checked)
this.master.value = 'check all';
else if (n_checked == grp.length)
this.master.value = 'uncheck all';
}

var f = document.forms, form,
els, el, i = 0, j, k, m;
while (form = f[i++])
{
els = form.elements;
j = -1;
while (el = els[++j])
{
if (el.name == masterName &&
(m = el.className.match(/\bmaster-(.+)\b/)))
{
this.inc = (m[1] == 'before') ? 1 : -1;
this.master = el;
this.grp = els[els[j + this.inc].name];
this.master.grp = this.grp;
el.onclick = this.set;
el.disabled = false;
if (this.inc == 1)
{
k = 0;
while (el = this.master.grp[k++])
{
el.master = this.master;
el.onclick = this.chk;
}
}
else
{
k = this.master.grp.length;
while (k-- && (el = this.master.grp[k]))
{
el.master = this.master;
el.onclick = this.chk;
}
}
}
}
}
}

window.onload = function()
{
gangs.add('gang1', 'gang2');
gangs.init();
}

</script>
</head>
<body>
<form>
<ul>
<li>
<input class="normal" type="text" name="t1" value=" Hey,">
</li><li>
<input class="normal" type="text" name="t2" value=" Lucy -">
</li><li>
<input
name="gang1"
class="master-before"
type="button"
value="check all"
disabled="disabled"
style="background:moccasin;">
<div id="d1">
<ol>
<li>
<input type="checkbox" name="products_id[]" value="2"> 2
</li><li>
<input type="checkbox" name="products_id[]" value="3"> 3
</li><li>
<input type="checkbox" name="products_id[]" value="4"> 4
</li><li>
<input type="checkbox" name="products_id[]" value="5"> 5
</li><li>
<input type="checkbox" name="products_id[]" value="6"> 6
</li>
</ol>
</div>
<div id="d2">
<ol style="list-style-type:lower-roman;">
<li>
<input type="checkbox" name="products_name[]" value="foo"> foo
</li><li>
<input type="checkbox" name="products_name[]" value="bar"> bar
</li><li>
<input type="checkbox" name="products_name[]" value="baz"> baz
</li><li>
<input type="checkbox" name="products_name[]" value="hah"> hah
</li><li>
<input type="checkbox" name="products_name[]" value="feh"> feh
</li>
</ol>
</div>
<li>
<input
name="gang2"
class="master-after"
type="button"
value="check all"
disabled="disabled"
style="background:pink;">
</li><li>
<input class="normal" type="text" name="t1" value=" I'm">
</li><li>
<input class="normal" type="text" name="t2" value=" home!">
</li>
</ul>
</form>
</body>
</html>
 
D

Dr John Stockton

JRS: In article <[email protected]>
, dated Fri, 13 May 2005 12:59:40, seen in
RobB said:
<style type="text/css">

.master-before, .master-after {
width: 102px;
font: 11px tahoma;
margin: 2px 0;
}
#d1 {
...
Click to expand...

If you were to try that in a web-authoring group, I suspect that you
would be told that setting fonts to absolute sizes is BAD - and in
conflict with accessibility principles. Even if you had used 11pt.

Setting widths in px is also bad, AIUI, except for boxing graphics of
known size.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Filter table rows based on multiple checkboxes value 2
I dont get this. Please help me!! 2
How can I hide a div using an event listener on multiple checkboxes? 6
Can't execute php to delete multiple rows in database 3
How to check all the checkboxes if checkbox name is 'name[]' 9
Checking dynamically populated data using ajax with user entered value 5
Survey details won't go through using php, ajax, Mysql 0
Checkbox Validation on Dynamic ASP Checkboxes 34

Members online

No members online now.
Total: 28 (members: 0, guests: 28)
Robots: 288

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,007
Latest member
obedient dusk

Latest Threads

Top