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

小编典典

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

all

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

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>

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

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

阅读 65

2022-08-16

共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>

.allergies您可以通过一个单独的 CSS 类标记and元素来使其更通用，您可以.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等）。我不能说它们是否是必要的，或者你是否必须像这样使用它们。只是想提一下。

2022-08-16