Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    May 2005
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool parent and child checkboxes

    I currently have populated checkboxes in my form. I would like to write script that by clicking on a parent checkbox it will automatically select the child checkboxes as well.

    The current Script I have is only the parent with a name and populated value attached to it. I would like to attach child checkboxes for each checkbox that appears from code below.

    Code:
     <input type="checkbox" name="price" value="<%Response.Write Recordset("price")%>"/>

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    What naming pattern you are using to indicate that these set of checkboxes are under a particular parent checkbox? We need to know such kind of relationship to be able to quickly solve it exactly to your checkbox setup.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Or you can do it without relying on the naming pattern but on grouping a set of checkboxes inside a container.
    Code:
    function toggleGroup(parentChk, parentId){
      var parent = document.getElementById(parentId);
      var chks = parent.getElementsByTagName('input');
      var len = chks.length;
      var state = parentChk.checked;
      for (var i=1; i<len; i++){ //skip the first checkbox
        if (chks[i].type=="checkbox"){ //just in case you have other input types inside the div
          chks[i].checked = state;
        }
      }
    }
    ...
    <div id="priceDiv">
    <input type="checkbox" name="price" value="<%Response.Write Recordset("price")%>" onclick="toggleGroup(this, 'priceDiv')" />
      <input type="checkbox" name="price1" value="1"/>
      <input type="checkbox" name="price2" value="2"/>
      <input type="checkbox" name="price3" value="3"/>
    </div>

  • #4
    New Coder
    Join Date
    May 2005
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The below code comes up with (as an example)

    Code:
    <td><input type="checkbox" name="price" value="<%Response.Write Recordset("price")%>"/></td>
    <td><input type="checkbox" name="price" value="1"/></td>
    <td><input type="checkbox" name="price" value="2"/></td>
    <td><input type="checkbox" name="price" value="3"/></td>
    <td><input type="checkbox" name="price" value="4"/></td>

    I would like to do something like this with first input is parent and second is child in each td tag.

    Code:
    <td><input type="checkbox" name="price" value="<%Response.Write Recordset("price")%>"/><input type="checkbox" name="option" value="<%Response.Write Recordset("price")%>"/></td>
    <td><input type="checkbox" name="price" value="1"/><input type="checkbox" name="option" value="1"/></td>
    <td><input type="checkbox" name="price" value="2"/><input type="checkbox" name="option" value="2"/></td>
    <td><input type="checkbox" name="price" value="3"/><input type="checkbox" name="option" value="3"/></td>
    <td><input type="checkbox" name="price" value="4"/><input type="checkbox" name="option" value="4"/></td>

    So if the in each td tag if the first input (the parent) is selected the second input (the child) will automatically be selected as well. I will ultimately hide the child input.

    Thanks.SalJB

  • #5
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great solution glenngv. The only thing that i suggest is that you check if parent is null. You dont want to run into an error!
    Code:
    if (!parent) return false;
    Quote Originally Posted by glenngv
    Or you can do it without relying on the naming pattern but on grouping a set of checkboxes inside a container.
    Code:
    function toggleGroup(parentChk, parentId){
      var parent = document.getElementById(parentId);
      var chks = parent.getElementsByTagName('input');
      var len = chks.length;
      var state = parentChk.checked;
      for (var i=1; i<len; i++){ //skip the first checkbox
        if (chks[i].type=="checkbox"){ //just in case you have other input types inside the div
          chks[i].checked = state;
        }
      }
    }
    ...
    <div id="priceDiv">
    <input type="checkbox" name="price" value="<%Response.Write Recordset("price")%>" onclick="toggleGroup(this, 'priceDiv')" />
      <input type="checkbox" name="price1" value="1"/>
      <input type="checkbox" name="price2" value="2"/>
      <input type="checkbox" name="price3" value="3"/>
    </div>

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    So you are using a table. Are the checkboxes belonging to a set in the same row? And the first checkbox in a row is the parent checkbox? If you answer yes, then you just modify my initial suggestion a bit.

    Code:
    function toggleGroup(parentChk){
      var parentRow = parentChk.parentNode.parentNode; //go 2 parent elements up
      var chks = parentRow.getElementsByTagName('input');
      var len = chks.length;
      var state = parentChk.checked;
      for (var i=1; i<len; i++){ //skip the first checkbox
        if (chks[i].type=="checkbox"){ //just in case you have other input types inside the div; can be removed if no other input types
          chks[i].checked = state;
        }
      }
    }
    ...
    <input type="checkbox" name="price" value="<%Response.Write Recordset("price")%>" onclick="toggleGroup(this)" />

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Quote Originally Posted by SpirtOfGrandeur
    Great solution glenngv. The only thing that i suggest is that you check if parent is null. You dont want to run into an error!
    Code:
    if (!parent) return false;
    Yes it is good to have that, but here, it is assumed that you will pass a valid parent id that really exists. If not, then in that case you also need to check if parentChk is null or not.

  • #8
    New Coder
    Join Date
    May 2005
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts

    it works, need clarification

    Thanks guys. It is working.

    I would like a bit of clarification on what SpirtOfGrandeur was talking about.
    Where/IF would I insert:

    Code:
    if (!parent) return false;
    SalJB.Thanks

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    If you really need to do the checking, then you just put it after the parent variable is set.

  • #10
    New Coder
    Join Date
    May 2005
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts

    a bit more

    How would I change the visibility of the child checkbox to hidden?
    If I change the type="checkbox" to type="hidden" it will no longer be a checkbox.

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    checkboxReference.style.display="none";

    Set the display to "inline" to show it again.

  • #12
    New Coder
    Join Date
    May 2005
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts

    sorry

    glennGV you have been so helpful I do appreciate it. I am sorry for buggin you again but I am a bit new to js.

    where would I add:

    checkboxReference.style.display="none";

    I tried puting it between <style> tags and then in the begining and then the end of the <script> tag and in the input of the child checkboxes.

    thanks so much and thank you ahead of time.

    SalJB

    if there is a way of rating your help let me know!!

  • #13
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv
    Yes it is good to have that, but here, it is assumed that you will pass a valid parent id that really exists. If not, then in that case you also need to check if parentChk is null or not.
    Hahahah... good point! Whoops I missed that one!

    saljb I was just letting you know to check the vairable in telling you to check if parent is null... I assume nothing because I write JS all day long that other programmers are going to be using... If there is an error they will find it. And they like popups telling them what and where it went wrong. Sorry glengv, I hope you took no offence to it because none was intended, I was just trying to be helpful!

  • #14
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Quote Originally Posted by SpirtOfGrandeur
    Sorry glengv, I hope you took no offence to it because none was intended, I was just trying to be helpful!
    No problem.

    Quote Originally Posted by saljb
    where would I add:
    checkboxReference.style.display="none";
    I don't know when do you want to hide/show the checkboxes. You have not shown your latest code.

  • #15
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Toggling the Selections

    @glenngv You saved the day. Your "container" approach to selecting a group of checkboxes worked like a charm and was exactly what I needed.

    Question for you: is it possible to adapt the function to toggle between "Select All" and "Revert to Default?" Some of the check boxes in the app I am working with are preselected. I have done this with your function:

    Code:
    function checkCategory(parentChk, parentId){
      var parent = document.getElementById(parentId);
      var chks = parent.getElementsByTagName('input');
      var len = chks.length;
      var state = parentChk.checked;
      if (!parent) return false;
      for (var i=1; i<len; i++){ //skip the first checkbox
    //added line
    	if (dflt[i] && dflt[i]=='yes') {setChecked(i); }
    //added else
          else chks[i].checked = state;
      }
    }
    It works fine for the first container, but produces bizzare behavior in the others. Obviously, my cookie-cutter approach to JavaScripting is the culprit here.

    Maybe by introducing a child variable?
    Last edited by blinkdt; 07-24-2005 at 01:31 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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