If checkbox is checked, check another box

I'm trying to create a few checkboxes that when checked, will check another... which I got to work! But, the problem I'm having now is that if multiple are selected and one is unchecked at any point, the additional checkbox get unchecked no matter what. I'd like to find a way to have the additional checkbox stay checked, as long as one of the others is, and uncheck if none are selected.

For example: I have 4 checkboxes, if a user selects #1 I want to check #2. Or if a user selects #1 + #3, check #2, but if #3 is unchecked, #2 stays as long as 1,3, or 4 are. I hope this makes sense. I've been trying different things, but this is the code where I landed. Any help, advice on a better way to accomplish this would be greatly appreciated.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var chk1 = $("input[type='checkbox'][value='1']");
var chk2 = $("input[type='checkbox'][value='2']");
var chk3 = $("input[type='checkbox'][value='3']");
var chk4 = $("input[type='checkbox'][value='4']");

chk1.on('change', function(){
  chk2.prop('checked',this.checked);
});
chk3.on('change', function(){
  chk2.prop('checked',this.checked);
});
chk4.on('change', function(){
  chk2.prop('checked',this.checked);
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="1" class="user_name">1
<br>
<input type="checkbox" value="2" class="user_name">2
<br>
<input type="checkbox" value="3" class="user_name">3
<br>
<input type="checkbox" value="4" class="user_name">4

<!-- end snippet -->

If you want to keep chk2 checked until all others are unchecked, you have to look for the status of all other boxes in each event handler. Ideally, you would create a function for that, so you don't need to repeat your code for all handlers.

function toggleChk2() {
  let check2 = (chk1.is(':checked') ||
      chk3.is(':checked') ||
      chk4.is(':checked'))
  chk2.prop('checked',check2);
}

chk1.on('change', function(){
  toggleChk2();
});
chk2.on('change', function(){
  toggleChk2();
});
chk3.on('change', function(){
  toggleChk2();
});
chk4.on('change', function(){
  toggleChk2();
});

You can also add this function to the change handler of chk2 if you want to prevent manual change of that checkbox.

For the record: alternative without JQuery, using event delegation and a css selector to query the state of the other checkboxes:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

[`change`, `click`].forEach( evtType => 
  document.addEventListener(evtType, handle) );

function handle(evt) {
  if (evt.target.closest(`.user_name`)) {
    const cb2 = document.querySelector(`.user_name[value="2"]`);
    const oneOfOthersChecked = 
      document.querySelector(`.user_name:not([value="2"]):is(:checked)`);
    return cb2.checked = !!oneOfOthersChecked || cb2.checked;
  }
  if (evt.target.id === "empty") {
    return document.querySelectorAll(`.user_name:checked`)
      .forEach(cb => cb.checked = !cb.checked);
  }
  return true;
}

<!-- language: lang-html -->

<input type="checkbox" value="1" class="user_name">1
<br>
<input type="checkbox" value="2" class="user_name">2
<br>
<input type="checkbox" value="3" class="user_name">3
<br>
<input type="checkbox" value="4" class="user_name">4
<br>
<button id="empty">Uncheck all</button>

<!-- end snippet -->

This might be a bit overkill, but you could define the "dependencies" inside a structure.

// Map contents displayed using object notation
const dependenciesOf = Map{
  "chk1": ["chk2"],
  "chk3": ["chk2"],
  "chk4": ["chk2"],
  "chk5": ["chk1", "chk4"]
}

With this structure defined we can programmatically build a reverse index.

// Map contents displayed using object notation
const requiredBy = Map{
  "chk1": ["chk5"],
  "chk2": ["chk1", "chk3", "chk4"],
  "chk4": ["chk5"]
}

With these 2 structures defined we can use the following change event handler:

$('input[type="checkbox"]').on("change", function () {
  const dependencies = dependenciesOf.get(this.id) || [];
  for (const dependency of dependencies) {
    if (this.checked) {
      // mark the dependency as checked and disable interaction
      $(`#${dependency}`).prop("disabled", true).prop("checked", true).trigger("change");
    } else {
      // enable the dependency interaction whenever the dependency is no longer required
      const ids = requiredBy.get(dependency) || [];
      const isRequired = ids.some(id => $(`#${id}`).prop("checked"));
      if (!isRequired) $(`#${dependency}`).prop("disabled", false);
    }
  }
});

This will mark all the relevant dependencies as checked and will disable the user interaction as long as it's required by another checkbox.

The reason we .trigger("change") after changing the checked value, is to recursively check dependencies. If we don't do this chk5 would only check chk1 and chk4, but not chk2.

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

// define dependencies (based on element ID)
const dependenciesOf = new Map([
  ["chk1", ["chk2"]], // checkbox 1 requires checkbox 2 to be set
  ["chk3", ["chk2"]], // checkbox 3 requires checkbox 2 to be set
  ["chk4", ["chk2"]], // checkbox 4 requires checkbox 2 to be set
  ["chk5", ["chk1", "chk4"]], // checkbox 5 requires checkbox 1 and 4 to be set
]);

// programatically build a reverse index of the dependencies
const requiredBy = new Map();
for (const [checkbox, dependencies] of dependenciesOf) {
  for (const dependency of dependencies) {
    if (!requiredBy.has(dependency)) requiredBy.set(dependency, []);
    requiredBy.get(dependency).push(checkbox);
  }
}

$('input[type="checkbox"]').on("change", function () {
  const dependencies = dependenciesOf.get(this.id) || [];
  for (const dependency of dependencies) {
    if (this.checked) {
      // mark the dependency as checked and disable interaction
      $(`#${dependency}`).prop("disabled", true).prop("checked", true).trigger("change");
    } else {
      // enable the dependency interaction whenever the dependency is no longer required
      const ids = requiredBy.get(dependency) || [];
      const isRequired = ids.some(id => $(`#${id}`).prop("checked"));
      if (!isRequired) $(`#${dependency}`).prop("disabled", false);
    }
  }
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="chk1" type="checkbox" value="1" /><label for="chk1">1</label><br />
<input id="chk2" type="checkbox" value="2" /><label for="chk2">2</label><br />
<input id="chk3" type="checkbox" value="3" /><label for="chk3">3</label><br />
<input id="chk4" type="checkbox" value="4" /><label for="chk4">4</label><br />
<input id="chk5" type="checkbox" value="5" /><label for="chk5">5</label><br />

<!-- end snippet -->

I don't know if this is the answer you're looking for, but I hope this gives you at least some inspiration.