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>
