2 check boxes to have individual purposes singularly and a purpose when both selected using jQuery

Question

I have 2 checkboxes on a page, I have called them addon1checkbox and addon2checkbox. When you click addon1checkbox this should have an individual purpose, when you click on addon2checkbox this should have an individual purpose, when both of them are selected this should have a different purpose. I have got the 2 individuals working ok but I am lost for both of them. When both are selected the button with class="both" should be displayed. Here is the fiddle:

$('.addon1checkbox').change(function() {
  if (this.checked) {
    $('.addon1checkbox').each(function() {
      this.checked = true;
    });

    $('button').each(function() {
      $(this).hide();
    });

    $('.addon1').each(function() {
      $(this).show();
    });
  } else {
    $('.addon1checkbox').each(function() {
      this.checked = false;
    });

    $('button').each(function() {
      $(this).hide();
    });

    $('.normal').each(function() {
      $(this).show();
    });
  }
});

$('.addon2checkbox').change(function() {
  if (this.checked) {
    $('.addon2checkbox').each(function() {
      this.checked = true;
    });

    $('button').each(function() {
      $(this).hide();
    });

    $('.addon2').each(function() {
      $(this).show();
    });
  } else {
    $('.addon2checkbox').each(function() {
      this.checked = false;
    });

    $('button').each(function() {
      $(this).hide();
    });

    $('.normal').each(function() {
      $(this).show();
    });
  }
});

.product {
  margin-bottom: 1em;
}

button {
  margin-top: 1em;
}

.addon1,
.addon2,
.both {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product">
  <label>
    Addon 1
    <input type="checkbox" class="addon1checkbox">
  </label>
  <label>
    Addon 2
    <input type="checkbox" class="addon2checkbox">
  </label>
  <div>
    <button class="normal">
      Normal
    </button>
    <button class="addon1">
      Addon 1
    </button>
    <button class="addon2">
      Addon 2
    </button>
    <button class="both">
      Both
    </button>
  </div>
</div>

<div class="product">
  <label>
    Addon 1
    <input type="checkbox" class="addon1checkbox">
  </label>
  <label>
    Addon 2
    <input type="checkbox" class="addon2checkbox">
  </label>
  <div>
    <button class="normal">
      Normal
    </button>
    <button class="addon1">
      Addon 1
    </button>
    <button class="addon2">
      Addon 2
    </button>
    <button class="both">
      Both
    </button>
  </div>
</div>

Fiddle if you prefer:

https://jsfiddle.net/ng5bqc1j/1/

Answer 1

Here was my answer with huge thanks to @epascarello.

$('.addon1checkbox').change(function() {
  if (this.checked) {
    $('.addon1checkbox').each(function() {
      this.checked = true;
    });
  } else {
    $('.addon1checkbox').each(function() {
      this.checked = false;
    });
  }
});

$('.addon2checkbox').change(function() {
  if (this.checked) {
    $('.addon2checkbox').each(function() {
      this.checked = true;
    });
  } else {
    $('.addon2checkbox').each(function() {
      this.checked = false;
    });
  }
});

$('.addon1checkbox, .addon2checkbox').change(function() {
  $('button').each(function() {
    $(this).hide();
  });

  var cb1 = $('.addon1checkbox').is(':checked');
  var cb2 = $('.addon2checkbox').is(':checked');
  if (cb1 && cb2) {
    $('.both').each(function() {
      $(this).show();
    });
  } else if (cb1) {
    $('.addon1').each(function() {
      $(this).show();
    });
  } else if (cb2) {
    $('.addon2').each(function() {
      $(this).show();
    });
  } else {
    $('.normal').each(function() {
      $(this).show();
    });
  }
});

.product {
  margin-bottom: 1em;
}

button {
  margin-top: 1em;
}

.addon1,
.addon2,
.both {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product">
  <label>
    Addon 1
    <input type="checkbox" class="addon1checkbox">
  </label>
  <label>
    Addon 2
    <input type="checkbox" class="addon2checkbox">
  </label>
  <div>
    <button class="normal">
      Normal
    </button>
    <button class="addon1">
      Addon 1
    </button>
    <button class="addon2">
      Addon 2
    </button>
    <button class="both">
      Both
    </button>
  </div>
</div>

<div class="product">
  <label>
    Addon 1
    <input type="checkbox" class="addon1checkbox">
  </label>
  <label>
    Addon 2
    <input type="checkbox" class="addon2checkbox">
  </label>
  <div>
    <button class="normal">
      Normal
    </button>
    <button class="addon1">
      Addon 1
    </button>
    <button class="addon2">
      Addon 2
    </button>
    <button class="both">
      Both
    </button>
  </div>
</div>

Fiddle if you prefer:

https://jsfiddle.net/2jx6tvLw/2/

Answer 2

Have a look of this simpler script

$('.product [type=checkbox]').on("change",function() {
  const $parent = $(this).closest(".product");
  const checked = $('[type=checkbox]',$parent).filter(function() { return this.checked }).get()
  $('.both',$parent).toggle(checked.length===2)
  $('.normal',$parent).toggle(checked.length!==2)
});

.product {
  margin-bottom: 1em;
}

button {
  margin-top: 1em;
}

.addon1,
.addon2,
.both {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product">
  <label>
    Addon 1
    <input type="checkbox" class="addon1checkbox">
  </label>
  <label>
    Addon 2
    <input type="checkbox" class="addon2checkbox">
  </label>
  <div>
    <button class="normal">
      Normal
    </button>
    <button class="addon1">
      Addon 1
    </button>
    <button class="addon2">
      Addon 2
    </button>
    <button class="both">
      Both
    </button>
  </div>
</div>

<div class="product">
  <label>
    Addon 1
    <input type="checkbox" class="addon1checkbox">
  </label>
  <label>
    Addon 2
    <input type="checkbox" class="addon2checkbox">
  </label>
  <div>
    <button class="normal">
      Normal
    </button>
    <button class="addon1">
      Addon 1
    </button>
    <button class="addon2">
      Addon 2
    </button>
    <button class="both">
      Both
    </button>
  </div>
</div>

Answer 3

So add the functionality together and check the states onchange

$('.addon1checkbox, .addon2checkbox').on("change", function () {
  var cb1 = $('.addon1checkbox').is(':checked');
  var cb2 = $('.addon2checkbox').is(':checked');
  if (cb1 && cb2) {}
  else if (cb1) {}
  else if (cb2) {}
  else {}
});