html如何加复选框,html – 如何使用复选框里面的选项

它可能是晚了帮助你的任务，但其他人可能会发现我的答案有用。您不能将复选框放在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;

}

Select an option

First checkbox

Second checkbox

Third checkbox

说明：

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

要添加功能，我们指定一个JavaScript函数，当用户点击包含select元素(< div class =“selectBox”onclick =“showCheckboxes()”>)的div时，

我们还创建包含我们的复选框的div，并使用CSS样式。上面提到的JavaScript函数只是改变< div id =“checkboxes”> CSS显示属性的值从“none”到“block”，反之亦然。

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

更多信息：

CSS定位

CSS显示属性