如何在jQuery中点击复选框时添加或移除多个选中值至h3标签？

要实现多选值的添加与移除并同步显示在<h3>中，你只需要修改JavaScript部分，每次点击复选框时获取所有已选中的复选框值，再将这些值拼接后更新到<h3>标签里即可：

修改后的完整代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="banner-message">
  <h3>Select</h3>

  <ul>
    <li><label><input type="checkbox" value="List Item1"/>List Item1</label></li>
    <li><label><input type="checkbox" value="List Item2"/>List Item2</label></li>
    <li><label><input type="checkbox" value="List Item3"/>List Item3</label></li>
    <li><label><input type="checkbox" value="List Item4"/>List Item4</label></li>
    <li><label><input type="checkbox" value="List Item5"/>List Item5</label></li>
  </ul>
</div>

CSS

ul {
  list-style: none;
}

JavaScript

$(document).ready(function() {
  $('input').click(function() {
    // 获取所有已选中的复选框的值，转为数组
    const selectedValues = $('input:checked').map(function() {
      return $(this).val();
    }).get();
    
    // 将数组转为字符串，若无选中项则显示默认文本
    const displayText = selectedValues.length > 0 ? selectedValues.join(', ') : 'Select';
    
    // 更新h3的内容
    $('h3').text(displayText);
  });
});

核心逻辑说明 #

• $('input:checked')：选中所有处于勾选状态的复选框元素
• .map().get()：将选中元素的value属性提取出来，转换为普通数组
• selectedValues.join(', ')：把数组中的值用逗号加空格拼接成可读的字符串
• 空值判断：如果没有任何复选框被选中，<h3>会还原为初始的"Select"文本

内容的提问来源于stack exchange，提问作者PRANAV