javascript - html 只需单击即可选择多个选项，而无需按 CTRL 按钮

Question

在我的 Laravel 应用程序中，我有一个选择多个选项的表单。但是，我不想通过按 CTRL 然后选择它们来选择多个选项。我只想能够简单地单击选项，它们应该被选中。而且，如果我再次单击一个选定的选项，那么它应该被取消选择。

我怎样才能完成这项任务？这是我的选择选项列表的示例。

 <div class="form-group row">
  <label class="col-form-label" for="selectednames[]">Select Name</label>
 </div>
<div class="form-group row">                      
<select multiple name="selectednames[]">
  <option value="1">John</option>
  <option value="2">Sam</option>
  <option value="3">Max</option>
  <option value="4">Shawn</option>
</select>                      

PS：我在我的应用程序中使用引导程序和 jquery。

标签： javascriptjqueryhtmllaravel

Answer 1

只需使用复选框类型作为输入而不是选项，如下所示：

<div class="form-check">
    <input type="checkbox" name="selectednames[]" value = "1" />
    <input type="checkbox" name="selectednames[]" value = "2" />
    <input type="checkbox" name="selectednames[]" value = "3" />
    <input type="checkbox" name="selectednames[]" value = "4" />
</div>