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

【问题标题】：html Select multiple option with simple click without pressing CTRL buttonhtml 只需单击即可选择多个选项，而无需按 CTRL 按钮
【发布时间】：2019-05-02 17:27:21
【问题描述】：

在我的 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>

P.S：我在我的应用程序中使用 bootstrap 和 jquery。

【问题讨论】：

可能重复：stackoverflow.com/questions/8641729/…

标签： javascript jquery html laravel

【解决方案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>

【讨论】：

【解决方案2】：

我想你想要这样的东西：

$('select[multiple]').multiselect()

<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />

</head>
<body>

<select multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
</body>
</html>

【讨论】：