www.webdeveloper.com
Results 1 to 5 of 5

Thread: Checkbox help

  1. #1
    Join Date
    Oct 2010
    Posts
    9

    Checkbox help

    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

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Oct 2010
    Posts
    9
    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

  4. #4
    Join Date
    Oct 2010
    Posts
    9
    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...

    Quote Originally Posted by viks120 View Post
    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

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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>
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles