Checkbox help

**viks120** · 10-25-2010 11:54 AM

I want to develop javascript for following checkboxes

p1

---p2
---p3

p2
---p4
---p5

p3
---p2
---p1

p4
---p2

p5

If I check p2 then all p2 should be selected...simillarly for others. id attributes of p2 or p1 should be the p2 and p1 respectively.

Thanks in advance

**Fang** · 10-25-2010 01:02 PM

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<script type="text/javascript">
window.onload=function() {
var aObj=document.getElementsByTagName('input');
var i=aObj.length; 
while(i--) { 
    if(aObj[i].id.indexOf('p')==0) {
        aObj[i].onclick = function() {selectRelated(this);};
        }
    }
};

function selectRelated(parent) {
var aObj=document.getElementsByTagName('input');
var i=aObj.length; 
while(i--) { 
    var len = aObj[i].id.length;
    if(aObj[i].id.indexOf(parent.id, len-2)!=-1) {
        aObj[i].checked = (parent.checked)? true : false;
        }
    }
}
</script>

<style type="text/css">
* {margin:0;padding:0;}
p {margin:0 2em;}
</style>

</head>
<body>
<form action="#" name="form1">
<label for="p1">p1<input type="checkbox" id="p1"></label>
<p>
    <label for="xxxp2">xxxp2<input type="checkbox" id="xxxp2"></label>
    <label for="xxxp3">xxxp3<input type="checkbox" id="xxxp3"></label>
</p>
<label for="p2">p2<input type="checkbox" id="p2"></label>
<p>
    <label for="xxxp1">xxxp1<input type="checkbox" id="xxxp1"></label>
    <label for="xxp2">xxp2<input type="checkbox" id="xxp2"></label>
</p>
<label for="p3">p3<input type="checkbox" id="p3"></label>
<p>
    <label for="xxp3">xxp3<input type="checkbox" id="xxp3"></label>
    <label for="xxp1">xxp1<input type="checkbox" id="xxp1"></label>
</p>
</form>
</body>
</html>

**viks120** · 10-25-2010 01:49 PM

Hello Fang,

I really appreciate your help with this.

Only problem I am suffering that, if I select any child form one parent node...other child with same name or id should be selected...

Thanks again for your quick reply

**viks120** · 10-25-2010 02:10 PM

Fang,

I modified your code to solve my problem.

Thanks,

One more question,

What if I select child , then it will select automatically parent as well as all parents if they are child, it means

If I select p2 of p4 then all p2 will be selected then parent p4 will be selected, then all p4 will be selected, and another p2 child of p1 will be selected, therefore all p1 will be selected...

I know its kind of confusing... but you can do this that would be great...

Originally Posted by viks120

Hello Fang,

I really appreciate your help with this.

Only problem I am suffering that, if I select any child form one parent node...other child with same name or id should be selected...

Thanks again for your quick reply

**Fang** · 10-26-2010 06:07 AM

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<script type="text/javascript">
window.onload=function() {
var aObj=document.getElementsByTagName('input');
var len=aObj.length; 
var parent;
for(var i=0; i<len; i++) { 
    if(aObj[i].id.indexOf('p')==0) {
        aObj[i].onclick = function() {selectRelated(this);};
        parent = aObj[i].id;
        }
    else if(aObj[i].id.indexOf('p', aObj[i].id.length-2)!=-1) {
        aObj[i].p = parent;
        aObj[i].onclick = function() {selectRelated(this);};
        }
    }
};

function selectRelated(parent) {
if(typeof parent.p != 'undefined') {
    parent = document.getElementById(parent.p);
    parent.checked = true;
    }
var aObj=document.getElementsByTagName('input');
var i=aObj.length; 
while(i--) { 
    var len = aObj[i].id.length;
    if(aObj[i].id.indexOf(parent.id, len-2)!=-1) {
        aObj[i].checked = (parent.checked)? true : false;
        }
    }
}
</script>

<style type="text/css">
* {margin:0;padding:0;}
p {margin:0 2em;}
</style>

</head>
<body>
<form action="#" name="form1">
<label for="p1">p1<input type="checkbox" id="p1"></label>
<p>
    <label for="xxxp2">xxxp2<input type="checkbox" id="xxxp2"></label>
    <label for="xxxp3">xxxp3<input type="checkbox" id="xxxp3"></label>
</p>
<label for="p2">p2<input type="checkbox" id="p2"></label>
<p>
    <label for="xxxp1">xxxp1<input type="checkbox" id="xxxp1"></label>
    <label for="xxp2">xxp2<input type="checkbox" id="xxp2"></label>
</p>
<label for="p3">p3<input type="checkbox" id="p3"></label>
<p>
    <label for="xxp3">xxp3<input type="checkbox" id="xxp3"></label>
    <label for="xxp1">xxp1<input type="checkbox" id="xxp1"></label>
</p>
</form>
</body>
</html>

Thread: Checkbox help

Thread Tools

Display

Checkbox help

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions