如何用jQuery实现多复选框选中时在div中展示对应数据？

我来帮你搞定这个需求！首先得先修正你HTML里的几个小问题，然后咱们写个通用的函数，就能轻松实现每个复选框对应不同内容的显示/隐藏啦。

第一步：修正HTML中的无效内容 #

你的HTML里有两处不符合规范的地方，先调整下：

1. 有两个复选框用了同一个ID checkbox3，HTML要求ID必须唯一，浏览器无法正确识别重复ID的元素；
2. autoUpdate容器里的两个复选框也用了重复的checkbox301ID，同样需要修正。

调整后的HTML如下，我还新增了数据属性绑定的方式，让复选框和对应内容关联更清晰：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 第一个复选框：绑定autoUpdate容器 -->
<input type="checkbox" class="filled-in" id="checkbox31" data-target="autoUpdate">
<label for="checkbox31" class="justify-content" style="font-weight:bold; font-size: 0.9rem;">DISCONNECT/PO CANCEL REASONS</label>
<div class="float-left">
 <textarea name="Text1" cols="40" rows="4"></textarea>
</div>

<!-- 第二个复选框：绑定Reason2容器，修正唯一ID -->
<input type="checkbox" class="filled-in" id="checkbox32" data-target="Reason2">
<label for="checkbox32" class="justify-content" style="font-weight:bold; font-size: 0.9rem;">REP USED REASON</label>
<div class="float-left">
 <textarea name="Text1" cols="40" rows="4"></textarea>
</div>

<!-- 第三个复选框：绑定Reason3容器，修正唯一ID -->
<input type="checkbox" class="filled-in" id="checkbox33" data-target="Reason3">
<label for="checkbox33" class="justify-content" style="font-weight:bold; font-size: 0.9rem;">CUSTOMER OBJECTION</label>
<div class="float-left">
 <textarea name="Text1" cols="40" rows="4"></textarea>
</div>

<!-- 第一个复选框对应内容 -->
<div id="autoUpdate" style="display:none">
 <input type="checkbox" class="filled-in" id="checkbox301">
 <label for="checkbox301" class="label-table"></label>
 &nbsp;&nbsp;&nbsp;&nbsp;
 <label class="col-sm-9 col-form-label pt-2">Promotion discontinued</label>
 <br />
 <input type="checkbox" class="filled-in" id="checkbox302">
 <label for="checkbox302" class="label-table"></label>
 &nbsp;&nbsp;&nbsp;&nbsp;
 <label class="col-sm-9 col-form-label pt-2">Abandoned service</label>
 <br />
</div>

<!-- 第二个复选框对应内容 -->
<div id="Reason2" style="display:none">
 <label class="col-sm-9 col-form-label pt-2">Reason 1</label>
 <label class="col-sm-9 col-form-label pt-2">Reason 2</label>
 <label class="col-sm-9 col-form-label pt-2">Reason 3</label>
</div>

<!-- 第三个复选框对应内容（新增容器） -->
<div id="Reason3" style="display:none">
 <label class="col-sm-9 col-form-label pt-2">Objection Reason 1</label>
 <label class="col-sm-9 col-form-label pt-2">Objection Reason 2</label>
</div>

这里的核心修改是给每个复选框加了data-target属性，值就是对应要控制显示的div的ID，这样我们就能通过这个属性快速建立关联。

第二步：通用的jQuery处理函数 #

现在写一个通用的事件处理函数，不用再为每个复选框单独写逻辑，新增复选框只要设置好data-target就能自动生效：

$(document).ready(function() {
  // 给所有带filled-in类的复选框绑定变更事件
  $('.filled-in').change(function() {
    // 获取当前复选框对应的目标容器ID
    const targetContainerId = $(this).data('target');
    // 找到对应的目标容器
    const targetContainer = $('#' + targetContainerId);

    // 根据复选框选中状态控制容器显示/隐藏
    if (this.checked) {
      targetContainer.fadeIn('slow');
    } else {
      targetContainer.fadeOut('slow');
    }
  });
});

代码逻辑说明 #

• $('.filled-in').change(...)：一次性给所有复选框绑定事件，不用逐个指定ID，扩展性更强；
• $(this).data('target')：读取当前复选框的data-target属性，拿到对应内容容器的ID；
• 最后根据复选框的选中状态，用fadeIn/fadeOut实现平滑的显示隐藏效果。

以后你再新增复选框时，只要给它设置唯一ID，加上data-target指向对应的内容容器，就能自动实现选中显示、取消隐藏的功能啦！

内容的提问来源于stack exchange，提问作者D.Prasad