如何将代码应用于多个字段集？

Question

我正在使用它来检查/取消选中一组特定的复选框

 var $allergies = $('.allergies.gchoice:not(:first-child).gfield-choice-input') $('.allergies.gchoice:first-child.gfield-choice-input').change(function () { if (this.checked) { $allergies.prop('checked', false) } }); $allergies.change(function () { if (this.checked) { $('.allergies.gchoice:first-child.gfield-choice-input').prop('checked', false) } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="allergies"> <div class="gchoice gchoice_2_20_1"> <input class="gfield-choice-input" name="input_20.1" type="checkbox" value="No Allergies" checked="checked" id="choice_2_20_1"> <label for="choice_2_20_1" id="label_2_20_1">No Allergies</label> </div> <div class="gchoice gchoice_2_20_2"> <input class="gfield-choice-input" name="input_20.2" type="checkbox" value="Beef" id="choice_2_20_2"> <label for="choice_2_20_2" id="label_2_20_2">Beef</label> </div> <div class="gchoice gchoice_2_20_3"> <input class="gfield-choice-input" name="input_20.3" type="checkbox" value="Chicken" id="choice_2_20_3"> <label for="choice_2_20_3" id="label_2_20_3">Chicken</label> </div> <div class="gchoice gchoice_2_20_4"> <input class="gfield-choice-input" name="input_20.4" type="checkbox" value="Dairy" id="choice_2_20_4"> <label for="choice_2_20_4" id="label_2_20_4">Dairy</label> </div> <div class="gchoice gchoice_2_20_5"> <input class="gfield-choice-input" name="input_20.5" type="checkbox" value="Fish" id="choice_2_20_5"> <label for="choice_2_20_5" id="label_2_20_5">Fish</label> </div> </div> <br><br> <div class="conditions"> <div class="gchoice gchoice_2_18_1"> <input class="gfield-choice-input" name="input_18.1" type="checkbox" value="No Conditions" checked="checked" id="choice_2_18_1"> <label for="choice_2_18_1" id="label_2_18_1">No Conditions</label> </div> <div class="gchoice gchoice_2_18_2"> <input class="gfield-choice-input" name="input_18.2" type="checkbox" value="Anxiety" id="choice_2_18_2"> <label for="choice_2_18_2" id="label_2_18_2">Anxiety</label> </div> <div class="gchoice gchoice_2_18_3"> <input class="gfield-choice-input" name="input_18.3" type="checkbox" value="Arthritis" id="choice_2_18_3"> <label for="choice_2_18_3" id="label_2_18_3">Arthritis</label> </div> <div class="gchoice gchoice_2_18_4"> <input class="gfield-choice-input" name="input_18.4" type="checkbox" value="Cancer" id="choice_2_18_4"> <label for="choice_2_18_4" id="label_2_18_4">Cancer</label> </div> <div class="gchoice gchoice_2_18_5"> <input class="gfield-choice-input" name="input_18.5" type="checkbox" value="Cataracts" id="choice_2_18_5"> <label for="choice_2_18_5" id="label_2_18_5">Cataracts</label> </div> </div>

但现在我有另一组复选框，我想将代码应用于称为条件

如何修改代码以使其适用于过敏或条件，而无需复制它。

Answer 1

一种可能的解决方案是：

 function checkboxGroup(checkboxes) { const master = checkboxes.first(); // get jQuery collection of the first one const slaves = checkboxes.slice(1); // get jQuery collection of all others master.change(untick(slaves)); slaves.change(untick(master)); } function untick(checkboxes) { return () => { // returning a lambda here as event handler checkboxes.prop('checked', false); }; } /* --- */ const $allergies = $('.allergies input'); const $conditions = $('.conditions input'); checkboxGroup($allergies); checkboxGroup($conditions);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="allergies"> <div class="gchoice gchoice_2_20_1"> <input class="gfield-choice-input" name="input_20.1" type="checkbox" value="No Allergies" checked="checked" id="choice_2_20_1"> <label for="choice_2_20_1" id="label_2_20_1">No Allergies</label> </div> <div class="gchoice gchoice_2_20_2"> <input class="gfield-choice-input" name="input_20.2" type="checkbox" value="Beef" id="choice_2_20_2"> <label for="choice_2_20_2" id="label_2_20_2">Beef</label> </div> <div class="gchoice gchoice_2_20_3"> <input class="gfield-choice-input" name="input_20.3" type="checkbox" value="Chicken" id="choice_2_20_3"> <label for="choice_2_20_3" id="label_2_20_3">Chicken</label> </div> <div class="gchoice gchoice_2_20_4"> <input class="gfield-choice-input" name="input_20.4" type="checkbox" value="Dairy" id="choice_2_20_4"> <label for="choice_2_20_4" id="label_2_20_4">Dairy</label> </div> <div class="gchoice gchoice_2_20_5"> <input class="gfield-choice-input" name="input_20.5" type="checkbox" value="Fish" id="choice_2_20_5"> <label for="choice_2_20_5" id="label_2_20_5">Fish</label> </div> </div> <br><br> <div class="conditions"> <div class="gchoice gchoice_2_18_1"> <input class="gfield-choice-input" name="input_18.1" type="checkbox" value="No Conditions" checked="checked" id="choice_2_18_1"> <label for="choice_2_18_1" id="label_2_18_1">No Conditions</label> </div> <div class="gchoice gchoice_2_18_2"> <input class="gfield-choice-input" name="input_18.2" type="checkbox" value="Anxiety" id="choice_2_18_2"> <label for="choice_2_18_2" id="label_2_18_2">Anxiety</label> </div> <div class="gchoice gchoice_2_18_3"> <input class="gfield-choice-input" name="input_18.3" type="checkbox" value="Arthritis" id="choice_2_18_3"> <label for="choice_2_18_3" id="label_2_18_3">Arthritis</label> </div> <div class="gchoice gchoice_2_18_4"> <input class="gfield-choice-input" name="input_18.4" type="checkbox" value="Cancer" id="choice_2_18_4"> <label for="choice_2_18_4" id="label_2_18_4">Cancer</label> </div> <div class="gchoice gchoice_2_18_5"> <input class="gfield-choice-input" name="input_18.5" type="checkbox" value="Cataracts" id="choice_2_18_5"> <label for="choice_2_18_5" id="label_2_18_5">Cataracts</label> </div> </div>

您可以通过单独的 CSS 类标记.allergies和.conditions元素，使其更通用，您将使用该 CSS 类将其用于包含复选框组的 select 元素：

 function checkboxGroup(checkboxes) { const master = checkboxes.first(); // get jQuery collection of the first one const slaves = checkboxes.slice(1); // get jQuery collection of all others master.change(untick(slaves)); slaves.change(untick(master)); } function untick(checkboxes) { return () => { // returning a lambda here as event handler checkboxes.prop('checked', false); }; } /* --- */ const $checkboxGroups = $('.checkboxgroup').toArray(); $checkboxGroups.forEach((group) => { checkboxGroup($('input', group)); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="allergies checkboxgroup"> <div class="gchoice gchoice_2_20_1"> <input class="gfield-choice-input" name="input_20.1" type="checkbox" value="No Allergies" checked="checked" id="choice_2_20_1"> <label for="choice_2_20_1" id="label_2_20_1">No Allergies</label> </div> <div class="gchoice gchoice_2_20_2"> <input class="gfield-choice-input" name="input_20.2" type="checkbox" value="Beef" id="choice_2_20_2"> <label for="choice_2_20_2" id="label_2_20_2">Beef</label> </div> <div class="gchoice gchoice_2_20_3"> <input class="gfield-choice-input" name="input_20.3" type="checkbox" value="Chicken" id="choice_2_20_3"> <label for="choice_2_20_3" id="label_2_20_3">Chicken</label> </div> <div class="gchoice gchoice_2_20_4"> <input class="gfield-choice-input" name="input_20.4" type="checkbox" value="Dairy" id="choice_2_20_4"> <label for="choice_2_20_4" id="label_2_20_4">Dairy</label> </div> <div class="gchoice gchoice_2_20_5"> <input class="gfield-choice-input" name="input_20.5" type="checkbox" value="Fish" id="choice_2_20_5"> <label for="choice_2_20_5" id="label_2_20_5">Fish</label> </div> </div> <br><br> <div class="conditions checkboxgroup"> <div class="gchoice gchoice_2_18_1"> <input class="gfield-choice-input" name="input_18.1" type="checkbox" value="No Conditions" checked="checked" id="choice_2_18_1"> <label for="choice_2_18_1" id="label_2_18_1">No Conditions</label> </div> <div class="gchoice gchoice_2_18_2"> <input class="gfield-choice-input" name="input_18.2" type="checkbox" value="Anxiety" id="choice_2_18_2"> <label for="choice_2_18_2" id="label_2_18_2">Anxiety</label> </div> <div class="gchoice gchoice_2_18_3"> <input class="gfield-choice-input" name="input_18.3" type="checkbox" value="Arthritis" id="choice_2_18_3"> <label for="choice_2_18_3" id="label_2_18_3">Arthritis</label> </div> <div class="gchoice gchoice_2_18_4"> <input class="gfield-choice-input" name="input_18.4" type="checkbox" value="Cancer" id="choice_2_18_4"> <label for="choice_2_18_4" id="label_2_18_4">Cancer</label> </div> <div class="gchoice gchoice_2_18_5"> <input class="gfield-choice-input" name="input_18.5" type="checkbox" value="Cataracts" id="choice_2_18_5"> <label for="choice_2_18_5" id="label_2_18_5">Cataracts</label> </div> </div>

编辑

除此之外，您对 CSS 类的使用看起来有点“奇怪”，因为您将它们当作 ID 使用（参考gchoice_2_20_1 、 gchoice_2_20_2等）。 我不能说它们是否是必要的，或者你是否必须像这样使用它们。 只是想提一下。