How do I apply code to multiple fieldsets?-CodePudding

I'm using this to check/uncheck a specific set of checkboxes

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

but now I have another set of checkboxes that I want to apply the code to called Conditions

How can I modify the code so that it applies to Allergies OR Conditions without having to duplicate it.

CodePudding user response：

One possible solution would be:

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

You can make it more generic by marking the .allergies and .conditions elements up via a separate CSS-class that you'd use to select elements the contain checkbox groups:

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

EDIT

Aside from that, your use of CSS-classes looks a bit "weird", because you are using them as if they were IDs (referring to gchoice_2_20_1, gchoice_2_20_2, etc.). I cannot say if they are necessary or if you have to use them like this. Just wanted to mention it.