如何使用“选择选项”中的复选框

javascript html css html-select

2022-08-30 04:27:43

客户给了我一个设计，它有一个“选择选项”菜单，其中包含一个复选框以及项目名称作为列表中的单个项目。是否可以在“选择选项”菜单中添加复选框？

注意：开发人员需要添加自己的ID才能使菜单有效，如果可能的话，我只需要HTML CSS代码。

答案 1

您不能将复选框放在select元素中，但您可以使用HTML，CSS和JavaScript获得相同的功能。这是一个可能的工作解决方案。解释如下。

enter image description here

法典：

var expanded = false;

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

<form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="one">
        <input type="checkbox" id="one" />First checkbox</label>
      <label for="two">
        <input type="checkbox" id="two" />Second checkbox</label>
      <label for="three">
        <input type="checkbox" id="three" />Third checkbox</label>
    </div>
  </div>
</form>

解释：

首先，我们创建一个选择元素，显示文本“选择一个选项”，以及覆盖（重叠）选择元素（）的空元素。我们不希望用户单击选择元素 - 它将显示一个空选项。要将元素与其他元素重叠，我们使用CSS位置属性，其值相对|绝对。<div class="overSelect">

为了添加功能，我们指定一个 JavaScript 函数，当用户单击包含我们的 select 元素（）的 div 时调用该函数。<div class="selectBox" onclick="showCheckboxes()">

我们还创建了包含复选框的 div，并使用 CSS 设置其样式。上面提到的JavaScript函数只是将CSS显示属性的值从“无”更改为“块”，反之亦然。<div id="checkboxes">

该解决方案在以下浏览器中进行了测试：Internet Explorer 10，Firefox 34，Chrome 39。浏览器需要启用 JavaScript。

更多信息：

CSS 定位

如何将一个 div 覆盖在另一个 div 上

http://www.w3schools.com/css/css_positioning.asp

CSS 显示属性

http://www.w3schools.com/cssref/pr_class_display.asp

答案 2

到目前为止最好的插件是Bootstrap Multiselect

编辑：我很久以前就写过这个。我不建议再使用jQuery了。你应该学习一个像Vue.js，React或Angular这样的反应式框架，在那里你有很多模块可供选择。我相信你会找到你需要的东西。例如，我从快速的谷歌搜索中找到了这个。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>jQuery Multi Select Dropdown with Checkboxes</title>

<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>

</head>

<body>

<form id="form1">

<div style="padding:20px">

<select id="chkveg" 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>

<br /><br />

<input type="button" id="btnget" value="Get Selected Values" />

<script type="text/javascript">

$(function() {
    
    $('#chkveg').multiselect({
        
        includeSelectAllOption: true
    });
    
    $('#btnget').click(function(){
        
        alert($('#chkveg').val());
    });
});

</script>

</div>

</form>

</body>
</html>

下面是一个演示：

$(function() {

  $('#chkveg').multiselect({
    includeSelectAllOption: true
  });

  $('#btnget').click(function() {
    alert($('#chkveg').val());
  });
});

.multiselect-container>li>a>label {
  padding: 4px 20px 3px 20px;
}

<link href="https://unpkg.com/bootstrap@3.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@3.3.2/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-multiselect@0.9.13/dist/js/bootstrap-multiselect.js"></script>
<link href="https://unpkg.com/bootstrap-multiselect@0.9.13/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>

<form id="form1">
  <div style="padding:20px">

    <select id="chkveg" 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>
    
    <br /><br />

    <input type="button" id="btnget" value="Get Selected Values" />
  </div>
</form>