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

94

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

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

javascript  html  css  html-select 
— 英雄特拉
source
5
“如果可能的话，我只需要HTML CSS代码” ...是的，这是可能的...您只需要自己编码或用google对其进行编码
— fmodos 2013年
5
@fmodos可能吗？请把我们演示，和OP -检查这个出来......这是不可能的CSS和HTML只
— 外国人先生
— kuldeep拉吉
@ Mr.Alien我很想念...我以为他要的是一个“可以”是HTML CSS而不是“必须”仅仅是“ HTML CSS”的组件...我的坏消息：/
— fmodos

Answers:

188

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

在此处输入图片说明

码：

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>
展开摘要

说明：

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

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

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

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

更多信息：

CSS定位

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

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

CSS显示属性

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

— 维特福
source
1
仅供参考：如果需要修改多个选择列表，则此解决方案将需要更多的精力。我建议使用一些积极维护的插件。
如何获取所选复选框的值？很好的答案，但是如果您提供plnkr或类似的东西，将非常有帮助。
— Pardeep Jain
7
还选择框不会消失，当用户选择任何选项时
— Pardeep Jain
1
这个答案很好，对我有用。但是，我对此做了一个改进。代替overselectdiv可能会在我使用的复杂接口中引起一些问题<option selected hidden>Select an option</option>。它可能不是最佳用途，hidden但它可以工作。
— Syknapse
2
但是当我们在外面单击时如何隐藏下拉菜单？
— saurabh kumar
58

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

<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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://davidstutz.de/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link href="https://davidstutz.de/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css" rel="stylesheet"/>
<link href="https://davidstutz.de/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="https://davidstutz.de/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>

<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>
展开摘要

— 微核
source
1
您无需在解决方案中使用太多的库。您可以只使用常规的HTML Multiple选择选项。谢谢！
— Power Star
3
我知道我可以使用HTML多重选择选项，但是我发现它很丑陋，而且不友好。
— pmrotule
4
我喜欢此插件的行为，但想在没有引导程序的情况下使用它...类似的东西吗？
— singpolyma '16
这个插件有很多问题……他们有150个未解决的问题，维护者说他没有时间。因此，在
— 遇到
1
@Erbureth演示中的外部脚本/样式表路径已过期（无效链接）。我更新了网址进行修复。
— pmrotule
18

对于纯CSS方法，可以将:checked选择器与::before选择器结合使用以内联条件内容。

只需将类添加select-checkbox到您的select元素并包括以下CSS：

.select-checkbox option::before {
  content: "\2610";
  width: 1.3em;
  text-align: center;
  display: inline-block;
}
.select-checkbox option:checked::before {
  content: "\2611";
}

您可以使用普通的旧unicode字符（带有转义的十六进制编码），如下所示：

或者，如果您想添加一些香料，则可以使用这些FontAwesome字形

屏幕截图

jsFiddle和Stack片段中的演示

显示代码段

注意：但是要注意IE兼容性问题

— 凯尔·米特
source
1
当multiple属性使<select>外观看起来像一个盒子而不是下拉列表时，这是一个问题……
— vsync
@vsync，能否详细说明您遇到的问题，甚至还可以拨弄小提琴并提供屏幕截图。这里的目标是应用于<select multiple>元素，因此应该是预期的用例。CSS选择器应特定于应用该类，因此您决定通过应用.select-checkbox该类在单个元素上使用
— KyleMit
1
如果您正在寻找纯CSS方法，强烈建议您使用这种优雅的解决方案。
— 阿尼斯·萨那
@KyleMit不错的解决方案！但是问题是，如果我要选择多个项目，则必须像简单的select元素一样使用Ctrl按钮。
— Lalit Rajput，
@LalitRajput，可以肯定的是，所有浏览器中所有多个选择控件的默认交互设计。我同意这有点古怪或直觉。如果需要，您始终可以找到方法来覆盖该默认行为。如何避免使用Java ctrl单击多选框的需要？-看到更新的小提琴
— KyleMit
14

尝试多项选择，尤其是多项。看起来是非常干净且易于管理的解决方案，其中包含大量示例。您也可以查看源。

<div>
  <div class="form-group row">
    <label class="col-sm-2">
      Basic Select
    </label>

    <div class="col-sm-10">
      <select multiple="multiple">
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2">
      Group Select
    </label>

    <div class="col-sm-10">
      <select multiple="multiple">
        <optgroup label="Group 1">
          <option value="1">1</option>
          <option value="2">2</option>
        </optgroup>
        <optgroup label="Group 2">
          <option value="6">6</option>
          <option value="7">7</option>
        </optgroup>
        <optgroup label="Group 3">
          <option value="11">11</option>
          <option value="12">12</option>
        </optgroup>
      </select>
    </div>
  </div>
</div>

<script>
  $(function() {
    $('select').multipleSelect({
      multiple: true,
      multipleWidth: 60
    })
  })
</script>
— 阿兹汉维
source
尽管此链接可以回答问题，但最好在此处包括答案的基本部分，并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。- 来自评论
— 贾斯汀·莱瑟德
8

我从@vitfo答案开始，但是我想拥有<option>内部<select>而不是复选框输入，因此我将所有答案汇总到一起，这是我的代码，希望对您有所帮助。

$(".multiple_select").mousedown(function(e) {
    if (e.target.tagName == "OPTION") 
    {
      return; //don't close dropdown if i select option
    }
    $(this).toggleClass('multiple_select_active'); //close dropdown if click inside <select> box
});
$(".multiple_select").on('blur', function(e) {
    $(this).removeClass('multiple_select_active'); //close dropdown if click outside <select>
});
	
$('.multiple_select option').mousedown(function(e) { //no ctrl to select multiple
    e.preventDefault(); 
    $(this).prop('selected', $(this).prop('selected') ? false : true); //set selected options on click
    $(this).parent().change(); //trigger change event
});

	
	$("#myFilter").on('change', function() {
      var selected = $("#myFilter").val().toString(); //here I get all options and convert to string
      var document_style = document.documentElement.style;
      if(selected !== "")
        document_style.setProperty('--text', "'Selected: "+selected+"'");
      else
        document_style.setProperty('--text', "'Select values'");
	});
:root
{
	--text: "Select values";
}
.multiple_select
{
	height: 18px;
	width: 90%;
	overflow: hidden;
	-webkit-appearance: menulist;
	position: relative;
}
.multiple_select::before
{
	content: var(--text);
	display: block;
  margin-left: 5px;
  margin-bottom: 2px;
}
.multiple_select_active
{
	overflow: visible !important;
}
.multiple_select option
{
	display: none;
    height: 18px;
	background-color: white;
}
.multiple_select_active option
{
	display: block;
}

.multiple_select option::before {
  content: "\2610";
}
.multiple_select option:checked::before {
  content: "\2611";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myFilter" class="multiple_select" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>
展开摘要

— avel子
source
6

备用Vanilla JS版本，单击外部可隐藏复选框：

let expanded = false;
const multiSelect = document.querySelector('.multiselect');

multiSelect.addEventListener('click', function(e) {
  const checkboxes = document.getElementById("checkboxes");
    if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
  e.stopPropagation();
}, true)

document.addEventListener('click', function(e){
  if (expanded) {
    checkboxes.style.display = "none";
    expanded = false;
  }
}, false)

我使用的是addEventListener而不是onClick，以便利用stopPropagation（）的捕获/冒泡阶段选项。您可以在此处阅读有关捕获/冒泡的更多信息：https : //developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

其余代码与vitfo的原始答案匹配（但不需要html中的onclick（））。有几个人要求使用此功能（无jQuery）。

这是codepen示例https://codepen.io/davidysoards/pen/QXYYYa?editors=1010

— 大卫索德
source
2

将此代码用于选项菜单上的复选框列表。

.dropdown-menu input {
   margin-right: 10px;
}   
<div class="btn-group">
    <a href="#" class="btn btn-primary"><i class="fa fa-cogs"></i></a>
    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" style="padding: 10px" id="myDiv">
        <li><p><input type="checkbox" value="id1" > OA Number</p></li>
        <li><p><input type="checkbox" value="id2" >Customer</p></li>
        <li><p><input type="checkbox" value="id3" > OA Date</p></li>
        <li><p><input type="checkbox" value="id4" >Product Code</p></li>
        <li><p><input type="checkbox" value="id5" >Name</p></li>
        <li><p><input type="checkbox" value="id6" >WI Number</p></li>
        <li><p><input type="checkbox" value="id7" >WI QTY</p></li>
        <li><p><input type="checkbox" value="id8" >Production QTY</p></li>
        <li><p><input type="checkbox" value="id9" >PD Sr.No (from-to)</p></li>
        <li><p><input type="checkbox" value="id10" > Production Date</p></li>
        <button class="btn btn-info" onClick="showTable();">Go</button>
    </ul>
</div>
展开摘要

— 鲁佩什·旺赫德（Rupesh Wankhede）
source
对于这种dropdown-menu在每行中都具有复选框元素的基本方法的充实示例，以下是将复选框放入Bootstrap下拉菜单
— KyleMit
1

在用AJAX调用更新选项列表之前，您可能正在加载multiselect.js文件，因此在执行multiselect.js文件时，存在一个空的选项列表以应用多选功能。因此，首先通过AJAX调用更新选项列表，然后启动多选调用，您将获得带有动态选项列表的下拉列表。

希望这对您有所帮助。

多选下拉列表以及相关的js和CSS文件

// This function should be called while loading page
var loadParentTaskList = function(){
    $.ajax({
        url: yoururl,
        method: 'POST',
        success: function(data){
            // To add options list coming from AJAX call multiselect
            for (var field in data) {
                $('<option value = "'+ data[field].name +'">' + data[field].name + '</option>').appendTo('#parent_task');
            }
   
            // To initiate the multiselect call 
            $("#parent_task").multiselect({
                includeSelectAllOption: true
            })
        }
    });
}
// Multiselect drop down list with id parent_task
<select id="parent_task" multiple="multiple">
</select>
展开摘要

— 亚斯维尼·莫杜帕利（Yaswini Modupalli）
source
0

如果要在同一页面中创建多个选择下拉菜单：

.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;
}

HTML：

 <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>
<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>

使用jQuery：

 function showCheckboxes(elethis) {
        if($(elethis).next('#checkboxes').is(':hidden')){
            $(elethis).next('#checkboxes').show();
            $('.selectBox').not(elethis).next('#checkboxes').hide();  
        }else{
            $(elethis).next('#checkboxes').hide();
            $('.selectBox').not(elethis).next('#checkboxes').hide();
        }
 }
— 阿什什
source
-2

仅添加类create div和添加类form-control。我使用JSP，boostrap4。忽略c：foreach。

<div class="multi-select form-control" style="height:107.292px;">
        <div class="checkbox" id="checkbox-expedientes">
            <c:forEach var="item" items="${postulantes}">
                <label class="form-check-label">
                    <input id="options" class="postulantes" type="checkbox" value="1">Option 1</label>
            </c:forEach>
        </div>
    </div>
— 胡安·西卢普·马扎（JuanSilupúMaza）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.