Django+HTML前端如何通过JS实现点击按钮隐藏已选中的checkbox？

你可以根据是否愿意调整模板结构，选择以下两种方案实现需求，两种方案都可以实现选中项点击按钮后隐藏、未选中项自动补位的效果。

方案1：无需修改现有Django模板，直接补全JS逻辑 #

该方案适配你当前的模板代码，不需要调整循环渲染部分，直接补全send_disappear函数和缺失的全选toggle函数即可：

<!-- 原有模板代码不需要修改 -->
<div><input type="checkbox" onclick="toggle(this)" name="optradio" value="notspecific"> select all courses below.</div>
{% for course in query_results_course %}
    <input type="checkbox" name="course" value="{{course}}" >{{course}}
{% endfor %}

<button class="button" type="button" onclick="send_disappear()">send_disappear</button>

<script>
// 全选功能实现
function toggle(selectAllBtn) {
  const allCourseChecks = document.querySelectorAll('input[name="course"]');
  allCourseChecks.forEach(check => check.checked = selectAllBtn.checked);
}

function send_disappear() {
  const allCourseChecks = document.querySelectorAll('input[name="course"]');
  allCourseChecks.forEach(check => {
    if (check.checked) {
      // 隐藏当前复选框
      check.style.display = 'none';
      // 处理复选框后面的课程文本节点，隐藏避免残留空白
      const textNode = check.nextSibling;
      if (textNode.nodeType === Node.TEXT_NODE) {
        const textWrapper = document.createElement('span');
        textWrapper.style.display = 'none';
        textNode.parentNode.insertBefore(textWrapper, textNode);
        textWrapper.appendChild(textNode);
      }
      // 清除选中状态，避免后续表单提交误带走隐藏的选项数据
      check.checked = false;
    }
  })
}
</script>

方案2：更推荐的优化结构方案（稳定性更高） #

建议先调整模板结构，把每个课程的复选框和文本包在独立容器中，操作更简单，也不会出现布局错乱、空白残留的问题，同时还支持点击文本选中复选框的可访问性特性：

第一步：修改Django模板代码 #

<!-- 可选增加小样式优化布局 -->
<style>
.course-item {
  display: block;
  margin: 4px 0;
  cursor: pointer;
}
</style>

<div><input type="checkbox" onclick="toggle(this)" name="optradio" value="notspecific"> select all courses below.</div>
{% for course in query_results_course %}
<!-- 把每个课程选项包在label容器中 -->
<label class="course-item">
  <input type="checkbox" name="course" value="{{course}}" >
  {{course}}
</label>
{% endfor %}

<button class="button" type="button" onclick="send_disappear()">send_disappear</button>

第二步：补全JS逻辑 #

function toggle(selectAllBtn) {
  const allCourseChecks = document.querySelectorAll('input[name="course"]');
  allCourseChecks.forEach(check => check.checked = selectAllBtn.checked);
}

function send_disappear() {
  const courseItems = document.querySelectorAll('.course-item');
  courseItems.forEach(item => {
    const check = item.querySelector('input[type="checkbox"]');
    if (check.checked) {
      // 直接隐藏整个容器，元素脱离文档流，后面的选项自动补位
      item.style.display = 'none';
      check.checked = false;
    }
  })
}

两种方案隐藏元素都使用display: none属性，隐藏的元素不会占用页面空间，未选中的选项会自动向上填充空白区域，完全符合你的需求。

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