Check or uncheck various inputs based on selected selection option-CodePudding

I'd like to change which checkboxes are checked based on which age is selected.

If adult is selected the first check box should be marked and the second unmarked. If 16-17 both should marked and if Under 15 only the second checkbox should be marked.

I suspect I need to use something other then on("click", but I'm not sure what the proper code is. There will be several other boxes to check/uncheck based on the selection but if I can get the right hooks I'm sure I can figure the rest out.

$('#age15').on("click", function() {
  var ybox1 = $(input[name = "idparent"]);
  ybox1.prop("checked", true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<label for="age">
    <span >Age </span>
    <select id="age" name="age" value=""  tabindex="">
        <option value="">Choose Age</option>
        <option id="age15" value="Under16" <?=($age=="Under16"?$sel:"");?>>Under 16</option>
        <option id="age1617" value="16-17" <?=($age=="16-17"?$sel:"");?>>16-17</option>
        <option id="ageadult" value="Adult" <?=($age=="Adult"?$sel:"");?>>Adult</option>
    </select>
</label>

<input type="checkbox" id="dlid" name="dlid" value="dlid" <?if($hasdlid=="dlid")echo "checked=\"checked\"";?>>
<label for="dlid">Valid Driver's License, Learner's Permit, or State/Military ID</label>


<input type="checkbox" id="idparent" name="idparent" value="idparent" <?if($hasidparent=="idparent")echo "checked=\"checked\"";?>>
<label for="idparent">Copy of Parent's ID (Front and Back)</label>

CodePudding user response：

The most effective way to interact with a select element is to hook an event handler to its change event. Attaching click event handlers to the option elements isn't well supported in modern browsers.

Within the change event handler you can get the value which was selected, then set the checked property of either checkbox based on that value. Given the logic you described in the question, it would look something like this:

let $dlid = $('#dlid');
let $idparent = $('#idparent');

$('#age').on("change", e => {
  let age = e.target.value;
  $dlid.prop('checked', age === 'Adult' || age === '16-17');
  $idparent.prop('checked', age === 'Under16' || age === '16-17');    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<label for="age">
  <span >Age </span>
  <select id="age" name="age" value=""  tabindex="">
    <option value="">Choose Age</option>
    <option id="age15" value="Under16">Under 16</option>
    <option id="age1617" value="16-17">>16-17</option>
    <option id="ageadult" value="Adult">Adult</option>
  </select>
</label>

<input type="checkbox" id="dlid" name="dlid" value="dlid" />
<label for="dlid">Valid Driver's License, Learner's Permit, or State/Military ID</label>

<input type="checkbox" id="idparent" name="idparent" value="idparent" />
<label for="idparent">Copy of Parent's ID (Front and Back)</label>