Checking Other Checkboxes when I Select a Checkbox - Not a “Select All” Checkbox

Question

I'm trying to create a form that has a checkbox up top that when checked by the user, selects other specific checkboxes, but not all of them. I'm having trouble finding the answer either by trial and error or by searching. The only thing I'm able to find is a "select all" option. Not what I want.

Ideally, when the user selects the checkbox next to "Administrative Package", I want the "Chrome Appearance Group" and the "Remote Start & Security Alarm" checkboxes to automatically be clicked, and possibly others of course.

Here is the code and my basic attempt at it that isn't working. Thanks in advance.

HTML:

  <fieldset>
    <legend>Special Packages</legend><input type="checkbox" name="pkg" value="admin" id="admin"><label for="admin">Administrative Package</label><br>
    <input type="checkbox" name="pkg" value="offroad"><label for="offroad">Off Road/Park District Truck</label>
  </fieldset>
  <fieldset>
    <legend>Engine Options
    </legend><input type="checkbox" checked="checked" required="" name="ezh"><label for="ezh">5.7L V8 HEMI 395 HP 410 lb-ft Torque - <strong>Standard</strong></label>
  </fieldset>
  <fieldset>
    <legend>Functional Packages</legend>
    <div id="functionalpackages">
      <label><input type="checkbox"  name="pkg" value="632.00" onclick="updatetotal()">Chrome Appearance Group (Bumpers, Grille, &amp; Aluminum Wheels) - <strong>$632.00</strong></label><br>
      <label><input type="checkbox" name="adb" value="359.00" onclick="updatetotal()">Protection Group (Tow Hooks, Transfer Case &amp; Front Suspension Skid Plates) - <strong>$359.00</strong></label><br>
      <label><input type="checkbox" name="pkg" value="359.00" onclick="updatetotal()">Remote Start &amp; Security Alarm - <strong>$359.00</strong></label></div>
  </fieldset>
  <fieldset>
    <legend>Interior Options</legend>
    <div id="interioroptions">
      <input type="checkbox" id="d7x8" name="d7x8" value="41.00" onclick="updatetotal()"><label for="d7x8">40/20/40 Front Center Bench Seat - <strong>$41.00</strong></label><br>
      <input type="checkbox" id="cke" name="cke" value="100.00" onclick="updatetotal()"><label for="cke">Carpet Floor Covering - <strong>$100.00</strong></label><br>
      <input type="checkbox" id="xap" name="xap" value="114.00" onclick="updatetotal()"><label for="xap">Power Adjustable Pedals - <strong>$114.00</strong></label><br>
      <input type="checkbox" id="xhc" name="xhc" value="268.00" onclick="updatetotal()"><label for="xhc">Trailer Brake Control - <strong>$268.00</strong></label><br>
      <input type="checkbox" id="ra2" name="ra2" value="632.00" onclick="updatetotal()"><label for="ra2">Uconnect 3 with 5" Display &amp; Bluetooth - <strong>$632.00</strong></label></div>
  </fieldset>
  <fieldset>
    <legend>Exterior Options</legend>
    <div id="exterioroptions">
      <input type="checkbox" id="nfx" name="nfx" value="405.00" onclick="updatetotal()"><label for="nfx">32 Gallon Fuel Tank - <strong>$405.00</strong></label><br>
      <input type="checkbox" id="dsa" name="dsa" value="450.00" onclick="updatetotal()"><label for="dsa">Anti-Spin Differential Rear Axle - <strong>$450.00</strong></label><br>
      <input type="checkbox" id="lm1" name="lm1" value="36.00" onclick="updatetotal()"><label for="lm1">Daytime Running Headlamps, Low Beam - <strong>$36.00</strong></label><br>
      <input type="checkbox" id="ttb" name="ttb" value="228.00" onclick="updatetotal()"><label for="ttb">LT265/70R17E BSW All Terrain Tires - <strong>$228.00</strong></label><br>
      <input type="checkbox" id="gpg" name="gpg" value="164.00" onclick="updatetotal()"><label for="gpg"></label>Power Black Trailer Tow Mirrors - <strong>$164.00</strong><br>
      <input type="checkbox" id="gfa" name="gfa" value="177.00" onclick="updatetotal()"><label for="gfa">Rear Window Defroster - <strong>$177.00</strong></label><br>
      <input type="checkbox" id="xb9" name="xb9" value="1178.00" onclick="updatetotal()"><label for="xb9">RamBox Cargo Management System - <strong>$1178.00</strong></label><br>
      <input type="checkbox" id="cs7" name="cs7" value="541.00" onclick="updatetotal()"><label for="cs7">Factory Tri-Fold Tonneau Cover - <strong>$541.00</strong></label><br>
      <input type="checkbox" id="mra" name="mra" value="600.00" onclick="updatetotal()"><label for="mra">Mopar® Stainless Steel Wheel-to-Wheel Side Steps (Dealer Installed) - <strong>$600.00</strong></label>
      <input type="checkbox" id="mru" name="mru" value="525.00" onclick="updatetotal()"><label for="mru">Mopar® Black Aluminum Cab Length Side Steps (Dealer Installed) - <strong>$525.00</strong></label></div>
  </fieldset>
  <fieldset>
    <legend>Delete Options</legend>
    <div id="deleteoptions">
      <input type="checkbox" id="xf8" name="xf8" value="-91.00" onclick="updatetotal()"><label for="xf8">Delete Class IV Receiver Tow Hitch - <strong>($-91.00)</strong></label><br>
      <input type="checkbox" id="xm9" name="xm9" value="-182.00" onclick="updatetotal()"><label for="xm9">Delete Factory Spray in Bedliner - <strong>(-$182.00)</strong></label><br>
      <input type="checkbox" id="lnx" name="lnx" value="-321.00" onclick="updatetotal()"><label for="lnx">Delete Left LED Spotlight - <strong>(-$321.00)</strong></label></div><br>
  </fieldset>
  <fieldset>
    <legend>Exterior Color Options</legend>
    <div id="color">
      <input type="radio" id="psc" name="color" value="0.00" checked="" onclick="updatetotal()"><label for="psc">Billet Silver Metallic Clear Coat - <strong>N/C</strong></label><br>
      <input type="radio" id="pw7" name="color" value="0.00" onclick="updatetotal()"><label for="pw7">Bright White Clear Coat - <strong>N/C</strong></label><br>
      <input type="radio" id="prv" name="color" value="0.00" onclick="updatetotal()"><label for="prv">Delmonico Red Pearl Coat (Cherry Red)- <strong>N/C</strong></label><br>
      <input type="radio" id="pxj" name="color" value="0.00" onclick="updatetotal()"><label for="pxj">Diamond Black Crystal Pearl Coat - <strong>N/C</strong></label><br>
      <input style="margin-left:2.5%" type="radio" id="bwv" name="color" value="700.00" onclick="updatetotal()"><label for="bwv">Black &amp; White Vinyl Wrapped Doors - <strong>$700.00</strong></label><br>
      <input style="margin-left:2.5%" type="radio" id="bwp" name="color" value="995.00"><label for="bwp" onclick="updatetotal()">Black &amp; White Painted Doors - <strong>$995.00</strong></label><br>
      <input type="radio" id="pr4" name="color" value="0.00"><label for="pr4">Flame Red Clear Coat (Fire Engine Red) - <strong>N/C</strong></label><br>
      <input type="radio" id="pau" name="color" value="0.00" onclick="updatetotal()"><label for="pau">Granite Crystal Metallic Clear Coat (Gunmetal) - <strong>N/C</strong></label><br>
      <input type="radio" id="pbj" name="color" value="0.00" onclick="updatetotal()"><label for="pbj">Hydro Blue Pearl Coat (Brighter Blue) - <srong>N/C</srong></label><br>
      <input type="radio" id="par" name="color" value="182.00" onclick="updatetotal()"><label for="par">Maximum Steel Metallic Clear Coat - <strong>$182.00</strong></label><br>
      <input type="radio" id="ppx" name="color" value="91.00" onclick="updatetotal()"><label for="ppx">Patriot Blue Pearl Coat (Dark Blue) - <strong>$91.00</strong></label></div>
  </fieldset>
  <fieldset>
    <legend>Service Contracts (Extended Warranties)</legend>
    <div id="servicecontracts">
      <label for="pmx375"><u>3 Years/75,000 Mile Maximum Care Service Contract</u></label><br>
      <input style="margin-left:2.5%" type="checkbox" id="pmx375" name="warranty" value="2865.00" onclick="updatetotal()"><strong>$0.00 Deductible - $2,865.00</strong><br>
      <label for="pmx575"><u>5 Years/75,000 Mile Maximum Care Service Contract</u></label><br>
      <input style="margin-left:2.5%" type="checkbox" id="pmx575" name="warranty" value="2585.00" onclick="updatetotal()"><strong>$0.00 Deductible - $2,585.00</strong>
      <input style="margin-left:2.5%" type="checkbox" id="pm575" name="warranty" value="3410.00" onclick="updatetotal()"><strong>$100.00 Deductible - $3,410.00</strong><br>
      <label for="pmx5100"><u>5 Years/100,000 Mile Maximum Care Service Contract</u></label><br>
      <input style="margin-left:2.5%" type="checkbox" id="pmx5100" name="warranty" value="4440.00" onclick="updatetotal()"><strong>$0.00 Deductible - $4,440.00</strong></div>
  </fieldset>
  <fieldset>
    <legend>Upfit Options</legend>
    <div id="upfitoptions">
      <input type="checkbox" id="pdsm" name="upfit" value="4695.00" onclick="updatetotal()"><label for="pdsm">Basic Patrol Package - <strong>$4,695.00</strong></label>
      <ul>
        <li style="margin-left:2.5%">Wiring Harness</li>
        <li style="margin-left:2.5%">Light &amp; Siren Control</li>
        <li style="margin-left:2.5%">Rear Deck Light with Arrow Stick</li>
        <li style="margin-left:2.5%">Floor Console with Arm Rest and Cup Holders</li>
        <li style="margin-left:2.5%">Speaker &amp; Bracket</li>
        <li style="margin-left:2.5%">Full Feature Light Bar, LED</li>
        <li style="margin-left:2.5%">Activate Headlight &amp; Taillight Flasher</li>
        <li style="margin-left:2.5%">Outside Mirror LED’s</li>
        <li style="margin-left:2.5%">Master-Tech Installation</li>
      </ul>
      <input type="checkbox" id="pdsu" name="upfit" value="4495.00" onclick="updatetotal()"><label for="pdsu">Basic Slick Top Package - <strong>$4,495.00</strong></label>
      <ul>
        <li style="margin-left:2.5%">Wiring Harness</li>
        <li style="margin-left:2.5%">Light &amp; Siren Control</li>
        <li style="margin-left:2.5%">Rear Deck Light with Arrow Stick</li>
        <li style="margin-left:2.5%">Floor Console with Arm Rest and Cup Holders</li>
        <li style="margin-left:2.5%">Speaker &amp; Bracket</li>
        <li style="margin-left:2.5%">Activate Headlight &amp; Taillight Flasher</li>
        <li style="margin-left:2.5%">Full Length Windshield Light</li>
        <li style="margin-left:2.5%">Outside Mirror LED’s</li>
        <li style="margin-left:2.5%">Master-Tech Installation</li>
      </ul>
      <input type="checkbox" id="pdsc" name="upfit" value="0.00" onclick="updatetotal()"><label for="pdsc">I'd like a full custom upfit quote.</label>

    </div>
  </fieldset>
</form>

Javascript

var all_check = document.getElementsByName('pkg');

main_check.onchange = checkAll;

for (var i = 0; i < all_check.length; i++) {
    all_check[i].onchange = childChanged;
}

function checkAll() {
    for (var i = 0; i < all_check.length; i++) {
        all_check[i].checked = main_check.checked;
    }
}

function childChanged() {
    if (!this.checked) {
        main_check.checked = false;
        return;
    }
    
    // Check if main checkbox should be checked
    for (var i = 0; i < all_check.length; i++) {
        if (!all_check[i].checked) return;
    }
    
    main_check.checked = true;
}

I have no idea if this Javascript is even any good. It's simply a copy & paste from another working Fiddle I found.

Answer 1

I would just add a class to the checkboxes you want to make reactive and set them in onclick, as below:

 var parents = document.getElementsByClassName("has-children"); for (var i = 0; i < parents.length; i++) { parents[i].onclick = checkChildren; } function checkChildren() { var parent_id = this.getAttribute('id'); var status = this.checked; var children = document.getElementsByClassName("part-of-" + parent_id); Array.prototype.forEach.call(children, function(child, index) { child.checked = status; }); }

 <input type="checkbox" id="admin" class="has-children"> Admin <br> <input type="checkbox" id="remote" class="has-children"> Remote <br> <input type="checkbox" id="chrome-group" class="part-of-admin"> Chrome Group <br> <input type="checkbox" id="remote-start" class="part-of-admin part-of-remote"> Remote Start<br> <input type="checkbox" id="remote-start" class="part-of-admin part-of-remote"> Remote Control<br> <input type="checkbox" id="another"> Not part of admin<br>