选中复选框时选中其他复选框-而不是“全选”复选框

Question

我试图创建一个表单，该表单顶部有一个复选框，当用户选中该复选框时，它会选择其他特定的复选框，但不是所有复选框。我很难通过反复试验或搜索找到答案。我唯一能找到的就是“全选”选项。不是我想要的。

理想情况下，当用户选中“管理包”旁边的复选框时，我想要“Chrome外观组”和“远程启动”

下面是代码和我在这方面的基本尝试，但它不起作用。提前谢谢。

超文本标记语言：

  <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;
}

我不知道这个Javascript是不是很好。这只是一份拷贝

Answer 1

我只想在要使其成为被动的复选框中添加一个类，并在onclick中设置它们，如下所示：

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>