parent checkbox makes children checkboxes selected

fea...@multicon.pl

unread,

May 12, 2005, 3:28:47 AM5/12/05

to

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

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

RobG

unread,

May 12, 2005, 8:04:17 AM5/12/05

to

fea...@multicon.pl wrote:
> I need to select children checkboxes when selecting the parent one.
> This is my function:
>
> function SelectChildrens(checkbox_name){
> form = document.forms[0];

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("-");

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[i].name.split("-");
> if (Sname.length==1){
> if (THATname[0]==Sname[0]){
> form.elements[i].checked=!form.elements[i].checked;
> }
> }
> if (Sname.length==2){
> if (THATname[1]==Sname[1]){
> form.elements[i].checked=!form.elements[i].checked;
> }
> }
> }//endof for
> }
>
> I've got parent checkbox which is:
> <input type=checkbox name=FISH-FILTERS
> onclick="SelectChildrens(this.name)">

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">
>

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>

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[i];
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[2]"
onclick="SelectChildrens(this)">select the 2's<br>

--
Rob

Matt Kruse

unread,

May 12, 2005, 8:28:52 AM5/12/05

to

fea...@multicon.pl wrote:
> I need to select children checkboxes when selecting the parent one.

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.

--
Matt Kruse
http://www.JavascriptToolbox.com

RobB

unread,

May 13, 2005, 3:59:40 PM5/13/05

to

fea...@multicon.pl wrote:
> I need to select children checkboxes when selecting the parent one.

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>

.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[i].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>

Dr John Stockton

unread,

May 14, 2005, 11:25:08 AM5/14/05

to

JRS: In article <1116014380.4...@g44g2000cwa.googlegroups.com>
, dated Fri, 13 May 2005 12:59:40, seen in news:comp.lang.javascript,
RobB <fern...@hotmail.com> posted :

><style type="text/css">
>
>.master-before, .master-after {
> width: 102px;
> font: 11px tahoma;
> margin: 2px 0;
>}
>#d1 {

> ...

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.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.