選中多個復選框時如何顯示div？-有解無憂

id="question5_1_block"如果在復選框的第一個欄位集中選中選項 2,3,4，我需要顯示一個 div 。其中之一或全部，或者只是 2 和 3、3 和 4 等。任何都不是選項 1。

我對此很陌生，并設法讓它們顯示和隱藏，但是如果您取消選中其中一個，即使某些復選框仍處于選中狀態，div 也會隱藏，并且除非未選擇任何內容或選中第一個復選框，否則它應該保留在那里。

預先感謝您的幫助

$(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>

uj5u.com熱心網友回復：

$(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");
}

應該作業的快速示例

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/315389.html

標籤：javascript 查询形式复选框

上一篇：按類過濾jQuery物件并且沒有標簽

下一篇：如何在附加專案中添加關閉按鈕？