单击按钮后，列表中选中的复选框应消失答案

【问题标题】：after clicking a button, the checked check box in a list should disappear单击按钮后，列表中选中的复选框应消失
【发布时间】：2021-07-15 08:34:42
【问题描述】：

我有一个网络应用程序，使用 Django 作为后端，使用普通 HTML 作为前端。

在 HTML 页面中，有一个复选框列表。选中一些复选框并单击按钮后，选中的复选框（在我的情况下为 <input type="checkbox" name="course" value="{{course}}" >{{course}}）应该消失，其他复选框应该自动填充空白。我怎么能在 JavaScript 中做到这一点？

        <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 send_disappear() {
    }
 </script>

【问题讨论】：

你尝试了什么？
"auto fill the blank" 究竟是什么意思？
@Professor Abronsius 如果某个复选框消失并留下空行，则下面的应该向上移动以填充空行
您的问题与提供的代码不匹配。那些新的复选框来自哪里？ toggle(this) 是什么？它在哪里定义？代码在哪里？ send_disappear 的代码在哪里？我只看到一个空函数。
而不是在每个复选框之后使用 BR 标签来控制 CSS 布局，然后当一个复选框被删除时，您无需担心 BR 创建一个空行

标签： javascript html css django

【解决方案1】：

使用display:flex控制容器元素。

阅读更多关于 flexbox 布局的信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

最佳实践：将for 属性添加到您动态生成的每个label 以与复选框元素关联。

你需要寻找 input[type=checkbox]:checked 元素 - 参考 JS 部分。

let send = document.querySelector("#send");
send.addEventListener("click", function() {
  let selectedCheckboxes = document.querySelectorAll(".courses input[type=checkbox]:checked");
  selectedCheckboxes.forEach(function(item) {
    item.parentElement.style.display = "none";
  });
});

.courses {
  display: flex;
  flex-direction: column; /* control the flex direction ROW|COLUMN */
  margin-bottom: 20px; /* for spacing only */
}

.courses label {
  margin: 5px 0; /* for spacing only*/
}

.courses input[type="checkbox"] {
  margin-right: 10px; /* for spacing only*/
}

<div class="courses">
  <label for="react"><input type="checkbox" id="react">React</label>
  <label for="js"><input type="checkbox" id="js">JavaScript</label>
  <label for="php"><input type="checkbox" id="php">PHP</label>
  <label for="py"><input type="checkbox" id="py">Python</label>
</div>
<button id="send">Send</button>

【讨论】：

【解决方案2】：

给定一个非常简化的 HTML 版本，您可以使用 CSS 注入 line-break 的外观，方法是使用 display:table 的小技巧和一些简单的 Javascript 显式选择任何 checked 复选框并删除它们，添加新类，更改显示属性 .... 或其他操作

const bRemove=false;

document.querySelector('button.button').addEventListener('click',()=>{
  document.querySelectorAll('[type="checkbox"]:checked').forEach( input=>{
    if( bRemove )input.parentNode.removeChild(input)
    else {
      input.disabled=true;
      input.style.display='none';
     }
  })
})

[type='checkbox']{display: table;}

<input type="checkbox" name="course[]" value="1" />
<input type="checkbox" name="course[]" value="2" />
<input type="checkbox" name="course[]" value="3" />
<input type="checkbox" name="course[]" value="4" />
<input type="checkbox" name="course[]" value="5" />
<input type="checkbox" name="course[]" value="6" />

<button class="button" type="button">send_disappear</button>

【讨论】：

谢谢，我的意思是复选框项消失了（复选框和复选框文本都消失了。