By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,732 Members | 1,429 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,732 IT Pros & Developers. It's quick & easy.

parent checkbox makes children checkboxes selected

P: n/a

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

Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
fe****@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>

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

--
Rob
Jul 23 '05 #2

P: n/a
fe****@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
Jul 23 '05 #3

P: n/a
fe****@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>
<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[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>

Jul 23 '05 #4

P: n/a
JRS: In article <11**********************@g44g2000cwa.googlegroups .com>
, dated Fri, 13 May 2005 12:59:40, seen in news:comp.lang.javascript,
RobB <fe******@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.
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.