选择列表中的 HTML 复选框答案

【问题标题】：HTML Checkboxes in select list选择列表中的 HTML 复选框
【发布时间】：2010-12-02 22:33:43
【问题描述】：

我正在尝试在选择列表中构建一个复选框列表（就像这里的国家列表：link text）

我使用的是 Asp.net MVC，所以它需要是纯/html &| javascript/jQuery。这可能吗？还是已经有一个我可以下载加载的预构建版本？

谢谢

翻录的 HTML/CSS：

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

<style type="text/css">
body {  background-color: #FFFFFF; font-family: Tahoma; font-size: 11px; }

/* Control Skin */
input { font: normal 11px Tahoma; }
div.ctrl { background-color: window; border: solid 1px ThreeDLightShadow; vertical-align: top; margin: 0; padding: 0;  width: 268px; }
input.Button { background: #2F89BD url('images/btn_default%20gradient.gif') repeat-x; cursor: pointer;
                height: 24px; color: #FFF; border: solid 1px #2F82BE; padding: 0 10px; width: auto;
                overflow: visible; }
input.TextBox { border: solid 1px ThreeDLightShadow; height: 16px; padding-top: 2px; text-indent: 2px; width: 150px; }

/* For MultiSelectControl */
.ms_multiSelector { position: absolute; display:inline ; border: 1px solid ThreeDLightShadow; width: 268px; z-index: 100; }
.MultiSelectControl_txtInput { width: 240px; border: none 0; margin: 5px 0 0 5px; padding: 0; vertical-align: top; }
.ms_selectListWrapper { padding: 0; margin: 0; }
.ms_selectList { background-color: #FFFFFF; overflow: auto; height: 265px; _height: 150px; /* For IE 6 */ }
.ms_chkSelectAll { padding-left: 3px; }
.selectList_Wrapper { padding: 0; margin: 0; }
.multiSelectorCountry { position: relative; clear: both; display: none; border: 1px solid ThreeDLightShadow; width: 275px; }
.multiSelector { position: absolute; visibility: hidden; border: 1px solid ThreeDLightShadow; width: 275px; }
.mutliselect_container { padding: 0; margin: 0; border: 0; display: inline; }
.chkSelectAll { padding-left: 3px; }
.selectList { background-color: #FFFFFF; overflow: auto; height: 200px; _height: 150px; /* For IE 6 */ }
.chklstSelect INPUT { float: left; width: 20px; /* To align the chkbox text in FF */ }
.chklstSelect LABEL { text-align: left; float: right; width: 230px; /* To align the chkbox text in FF */ }
#imgMultiSelectArrow { width: 20px; height: 20px; margin-left: 300px; padding-left: 300px; }
.multiselect_close { padding: 4px 0; float: right; width: 65px; background: transparent url(https://careers.microsoft.com/images/close_btn.gif) no-repeat 33px center; }

</style>




<title>Untitled Page</title>
</head>
<body>
<div class="ctrl" >
<input  type="text" value="Software Engineering: Development" readonly="readonly"  class="MultiSelectControl_txtInput"  />
<img  onmouseover="this.src='https://careers.microsoft.com/Images/mm_dropdown_20x20_hover.gif'" onmouseout="this.src='https://careers.microsoft.com/Images/mm_dropdown_20x20.gif'"  src="https://careers.microsoft.com/Images/mm_dropdown_20x20.gif" alt="Show/Hide" style="height:20px;width:20px;border-width:0px;" />
</div>
<div  class="ms_multiSelector">

    <div id="selectList" class="ms_selectList">
        <input  type="checkbox" value="allcountry" class="ms_chkSelectAll" />
        <span class="ms_chkSelectAll"  >Select All</span>

<div>
        <input  type='checkbox'  value='1'  />
        <label>Business Services & Administration</label>
        <br />
        <input type='checkbox'  value='37'  />
        <label>Customer Service & Support</label>
        <br />
     </div>
  </div>

</div>


</body>
</html>

【问题讨论】：

感谢您的意见。我已经从网站上撕掉了一些 html（上图）。我打算玩一下它，看看会发生什么。
我最终使用了这个：code.google.com/p/dropdown-check-list

标签： javascript jquery html asp.net-mvc css

【解决方案1】：

符合 CSS 2 级标准的跨浏览器 CSS 解决方案：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>select-multiple</title>
    <style>
       /* option:checked:before { content: "✓" } */
       option:before { content: "☐ " }
       option:checked:before { content: "☑ " }
    </style>
</head>
<body>
<h1>select-multiple</h1>
<select multiple="" size="5" style="width: 200px;">
    <option value="0">Banana</option>
    <option value="1">Cherry</option>
    <option value="2">Lemon</option>
    <option value="3">Banana</option>
    <option value="4">Cherry</option>
    <option value="5">Lemon</option>
    <option value="6">Banana</option>
</select>
</body>
</html>

Fiddle

【讨论】：

还有一些 Chromium 版本。但这是非常古老的标准，许多供应商不会完全实施。

【解决方案2】：

在 HTML 中，select 元素的唯一有效子元素是 option 和 optgroup。我强烈建议不要创建任何类型的非标准表单控件，因为您将破坏可访问性。我建议您以标准方式仅使用带有标签元素的标准表单控件。您可以使用 CSS 和 JavaScript 将这些表单控件的外观和交互性修改为您心中的内容，但不要更改视觉流顺序或选项卡顺序，因为这也会破坏可访问性。

Microsoft 表单的可访问替代方法是使用具有“multiple”属性的标准选择列表，以便可以从单个列表中选择多个选项。这是一个例子：

<select id="myselectlist" name="myselectlist" multiple="multiple">
    <option value="option 1">option 1</option>
</select>

您可以使用 CSS 将复选框的外观伪装成选中复选框的外观，作为从选项的伪类“活动”中出现的背景图形。不过，我不会走得更远。

【讨论】：

我喜欢这个答案——如果您希望有更好的机会在手机、平板电脑和其他设备上工作，这尤其好。 “从头开始”制作的任何东西都可能会有一个内部滚动条，例如带有溢出：自动的 div，大多数手机不支持（但它们确实支持标准列表/组合控件）。尽可能坚持标准。

【解决方案3】：

我尝试了很多用于选择列表中复选框的 js 插件，目前最好的一个是 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>

这是DEMO

【讨论】：

【解决方案4】：

也许这不是一个真正的答案，但无论如何：

这不是标准的 HTML 控件，他们使用一系列文本输入和 div 构建它，您必须做很多工作才能重现该行为，以便它可以工作（可能与任何浏览器一起使用）...

我不知道任何预先构建的 MVC 助手，也许 JQuery 有一些东西？无论如何，如果您找不到并且必须手动执行此操作，也许您应该选择具有更多标准组件的其他方式（或者恢复为对此类自定义更方便的闪光灯或银光）。

【讨论】：

【解决方案5】：

你可以试着让它保持原样，除了添加

.ms_selectList{ display: none; }

将以上内容添加到您已有的 ms_selectList 中

然后在 jquery 中具有某种点击功能，这将使 ms_selectList 显示时钟本质上使它看起来像一个选择框，而实际上它只是一个绝对定位的 div 标签，里面有一堆复选框。

jquery 应该是这样的，

$(document).ready(function(){

    $('.ctrl').click(function(){
        $('#selectList').toggle();
    });

})

【讨论】：

【解决方案6】：

这不是标准的 HTML 表单控件，它是由开发人员自定义构建的。

我不知道存在任何可以为您重现此行为的开源解决方案。恐怕您似乎不太可能在不付出超出其价值的情况下实现这一目标。

【讨论】：