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

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>

但现在我有了另一组复选框，我想将代码应用到名为Conditions 的复选框中

我如何修改代码，使其适用于过敏或疾病，而不必重复。

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元素，使其更通用，您可以使用该类来选择包含复选框组的元素：

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等(。我不能说它们是必需的还是必须这样使用它们。只是想提一下。