jquery 多选框展示 p标签展示

jQuery可以轻松地操作HTML元素，包括多选框和显示内容的`<p>`标签。如果你想在用户选择多选框中的选项时，动态更新对应的`<p>`标签的内容，你可以这样做：

首先，在HTML中设置一个多选框列表和一些初始的 `<p>` 标签，每个`<p>`对应一种可能的选择：

<div>
  <input type="checkbox" id="option1"> 选项1<br>
  <input type="checkbox" id="option2"> 选项2<br>
  <input type="checkbox" id="option3"> 选项3<br>
</div>

<p id="result1">默认内容1</p>
<p id="result2">默认内容2</p>
<p id="result3">默认内容3</p>

然后，使用jQuery来监听多选框的变化事件，比如`change`事件，当用户选择或取消选择某个选项时：

$(document).ready(function() {
  // 获取所有的多选框和对应的段落
  var checkboxes = $('input[type=checkbox]');
  var paragraphs = $('p');

  // 当多选框变化时，更新对应段落的内容
  checkboxes.change(function() {
    var selectedOptions = $(this).is(':checked'); // 判断是否被选中
    paragraphs.each(function(index) {
      if (selectedOptions[index]) { // 如果选中了这个选项
        $(this).text('已选'); // 更新文本内容
      } else {
        $(this).text('未选'); // 或者恢复默认内容
      }
    });
  });
});

现在，当用户勾选或多选某个多选框时，相应的`<p>`标签会显示“已选”或保持默认内容“未选”。