我正在尝试在选择列表中构建一个复选框列表（例如此处的国家/地区列表：链接文本 https://careers.microsoft.com/Search.aspx)
我正在使用 Asp.net MVC，因此它需要是 pure/html &| JavaScript/JQuery。这可能吗？或者是否已经有一个预构建版本可供我下载加载？
Thanks
撕碎的 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>
符合CSS level 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 http://jsfiddle.net/kxk2x/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
