选中多个复选框时如何显示div？

Posted 2023-05-08

【中文标题】选中多个复选框时如何显示div？

【英文标题】：How to show div when multiple chekboxes are checked?

【发布时间】：2021-12-02 00:41:29

【问题描述】：

如果在复选框的第一个字段集中选中了选项 2、3、4，我需要显示一个带有 id="question5_1_block" 的 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>

【问题讨论】：

只是一个评论：我能够同时检查“我已经拥有它”和检查“否”是不合逻辑的

你的意思是如果选项 2、选项 3 或选项 4 中的 1 被选中，div with id="question5_1_block" 会被显示？

首先，为什么是多选？答案似乎不一致。其次，在处理这样的逻辑时，最好根据所选选项的值或键来进行任何 UI 更新，而不是它们在 UI 中的位置。

很抱歉解释得不够清楚 - 必须选中选项 2、选项 3 或选项 4 之一，以便显示 div。其中一个或几个。

【参考方案1】：

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

应该可以工作的快速示例

【讨论】：

请注意，showOrHideDiv() 函数可以缩短为 const showOrHideDiv = () => $("#question5_1_block").toggle(condition());

没错！我的答案中的代码不是最好的，它只是一个可以改进很多的小重构:)