How to show div when multiple chekboxes are checked?-CodePudding

I need a div with id="question5_1_block" to be showed if options 2,3,4 are checked at the first fieldset of checkboxes. One of those or all together, or just 2 and 3, 3 and 4, etc. Anything, that is not an option 1.

I am pretty new to this and managed to get them showing and hiding, but if you uncheck one of them the div gets hidden eventhough some checkboxes are still checked and it should stay there unless nothing is chosen or the 1st checkbox is checked.

Thank you in advance for the help

$(document).ready(function() {
  $("#question5_1_block").hide();
})

$(function() {
  $("#Question52").click(function() {
    if ($(this).is(":checked")) {
      $("#question5_1_block").show();
    } else {
      $("#question5_1_block").hide();
    }
  });

  $("#Question53").click(function() {
    if ($(this).is(":checked")) {
      $("#question5_1_block").show();
    } else {
      $("#question5_1_block").hide();
    }
  });

  $("#Question54").click(function() {
    if ($(this).is(":checked")) {
      $("#question5_1_block").show();
    } else {
      $("#question5_1_block").hide();
    }
  });
});

<script src=https://code.jquery.com/jquery-1.12.4.min.js></script>
<script src=https://code.jquery.com/jquery-3.1.0.js></script>
<div class="page">
  <div id="form">
    <h3>Do you have an account?</h3>
    <p class="mb-0">Multiple answers possible </p>
    <fieldset>
      <p class="align-left">
        <input type="Checkbox" id="Question51" name="q5" value="I have it already" />I have it already<br>
        <input type="Checkbox" id="Question52" name="q5" value="No, but I would like to" />No, but I would like to<br>
        <input type="Checkbox" id="Question53" name="q5" value="No, tell me more about it" />No, tell me more about it<br>
        <input type="Checkbox" id="Question54" name="q5" value="No, but inform me when you have a promotion" />No, but inform me when you have a promotion
      </p>
    </fieldset>
    <div id="msg5"></div>
    <div id="question5_1_block">
      <h3>How should we contact you</h3>
      <fieldset>
        <p class="align-left">
          <input type="Checkbox" id="Question5_1" name="q5_1" value="By phone" />By phone<br>
          <input type="Checkbox" id="Question5_2" name="q5_1" value="By email" />By email<br>
          <input type="Checkbox" id="Question5_3" name="q5_1" value="By post" />By post
      </fieldset>
    </div>
  </div>
</div>
</form>

CodePudding user response：

$(function() {
  $("#Question52").click(showOrHideDiv);

  $("#Question53").click(showOrHideDiv);

  $("#Question54").click(showOrHideDiv);
});

function showOrHideDiv() {
    if (condition()) {
      $("#question5_1_block").show();
    } else {
      $("#question5_1_block").hide();
    }
}

function condition() {
  return $("#Question52").is(":checked") 
    || $("#Question53").is(":checked") 
    || $("#Question54").is(":checked");
}

Quick example that should work