HTML复选框 [英] HTML Checkboxes in select list
问题描述
我想在选择列表中创建一个复选框列表（例如：链接文本）
我使用Asp.net MVC，因此它需要是纯的/ html& javascript / JQuery。这是可能吗？
翻录的HTML / CSS：
p> < 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;颜色：#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; }
/ *对于MultiSelectControl * /
.ms_multiSelector {position：absolute; display：inline; border：1px solid ThreeDLightShadow; width：268px; z指数：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; / *对于IE 6 * /}
.ms_chkSelectAll {padding-left：3px; }
.selectList_Wrapper {padding：0; margin：0; }
.multiSelectorCountry {position：relative;清除： 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; / *对于IE 6 * /}
.chklstSelect INPUT {float：left; width：20px; / *将chkbox文本对齐在FF * /}
.chklstSelect LABEL {text-align：left; float：right; width：230px; / *将chkbox文本对齐在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>无标题页< / title>
< / head>
< body>
< div class =ctrl>
< input type =textvalue =软件工程：开发readonly =readonlyclass =MultiSelectControl_txtInput/>
< img onmouseover =this.src ='https://supporters.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.gifalt =显示/隐藏style =height：20px; width：20px; border-width：0px; 。 />
< / div>
< div class =ms_multiSelector>
< div id =selectListclass =ms_selectList>
< input type =checkboxvalue =allcountryclass =ms_chkSelectAll/>
< span class =ms_chkSelectAll>全选< / span>
< div>
< input type ='checkbox'value ='1'/>
< label>商业服务&管理< / label>
< br />
< input type ='checkbox'value = '37'/>
< label>客户服务&支持< / label>
< br />
< / div>
< / div>
< / div>
< / body>
< / html>
在HTML中，select元素的有效子元素选项和optgroup。我强烈建议不要创建任何类型的非标准表单控件，因为你会失败的辅助功能。我建议您只使用标准元素以标准方式使用标准表单控件。您可以使用CSS和JavaScript修改这些表单控件的外观和交互性到您的心的内容，除非不改变视觉流顺序或Tab顺序，因为也会破坏辅助功能。
Microsoft表单的可访问替代方法是使用带有multiple属性的标准选择列表，以便可以从单个列表中选择多个选项。以下是一个示例：
< select id =myselectlistname =myselectlistmultiple =multiple>
< option value =option 1>选项1< / option>
< / select>
您可以使用CSS来勾选复选框的外观，从选项的伪类活动显示。然而，我不会走得更远。
I'm trying to build a checkbox list within a select list (like the one for countries here: link text)
I'm using Asp.net MVC so it needs to be pure/html &| javascript/JQuery. Is this possable? Or is there already a prebuild one I could download load?
Thanks
Ripped 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>
In HTML the only valid children of the select element are option and optgroup. I strongly recommend not creating any sort of non-standard form control as you will be defeating accessibility. I recommend you use standard form controls in the standard manner with label elements only. You can modify the appearance and interactivity of those form controls to your hearts content using CSS and JavaScript, except don't alter the visual flow order or tab order as that also defeats accessibility.
The accessible alternative to the Microsoft form is to use a standard select list with the "multiple" attribute so that multiple options can be selected from a single list. Here is an example:
<select id="myselectlist" name="myselectlist" multiple="multiple">
<option value="option 1">option 1</option>
</select>
You could use CSS to fake the appearance of checkboxes with the appearance of a checked checkbox as a background graphic that appears from the option's pseudo class of "active". I would not go much further than that however.
这篇关于HTML复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
