/    Sign up×
Community /Pin to ProfileBookmark

Checkbox help

Copy linkTweet thisAlerts:
Oct 25.2010

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

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangOct 25.2010 — [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>
[/CODE]
Copy linkTweet thisAlerts:
@viks120authorOct 25.2010 — 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
Copy linkTweet thisAlerts:
@viks120authorOct 25.2010 — 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...

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[/QUOTE]
Copy linkTweet thisAlerts:
@FangOct 26.2010 — [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>
[/CODE]
×

Success!

Help @viks120 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...