HTML复选框中选择列表 [英] HTML Checkboxes in select list
问题描述
我想建立一个选择列表中的复选框列表（如一个国家在这里：链接文字）
我使用MVC的Asp.net所以它必须是纯/ HTML和放大器; |的JavaScript / JQuery的。这是possable？或者是有一个已经prebuild一个我可以下载负载？
感谢
剥去HTML / CSS：
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT; HEAD＆GT;＆LT;风格类型=文/ CSS＆GT;
身体{背景颜色：#FFFFFF; FONT-FAMILY：宋体;字体大小：11像素; }/ *控制皮肤* /
输入{字体：正常11像素宋体; }
div.ctrl {背景颜色：窗口;边框：1px的固体ThreeDLightShadow;垂直对齐：首位;保证金：0;填充：0;宽度：268px; }
input.Button {背景：＃2F89BD URL（图像/ btn_default％20gradient.gif'）重复-X;光标：指针;
family：宋体;颜色：#FFF;边框：1px的固体＃2F82BE;填充：0 10px的;宽度：汽车;
溢出：可见; }
input.TextBox {边界：1px的固体ThreeDLightShadow;高度：16px的;填充顶：2px的; TEXT-INDENT：2px的;宽度：150像素; }/ *对于MultiSelectControl * /
.ms_multiSelector {立场：绝对的;显示：内联;边框：1px的固体ThreeDLightShadow;宽度：268px;的z-index：100; }
.MultiSelectControl_txtInput {宽度：240像素;边界：无0;保证金：为5px 0 0 5像素;填充：0;垂直对齐：首位; }
.ms_selectListWrapper {填充：0;保证金：0; }
.ms_selectList {背景颜色：#FFFFFF;溢出：汽车;高度：265px; _height：150像素; / *对于IE 6 * /}
.ms_chkSelectAll {填充左：的3px; }
.selectList_Wrapper {填充：0;保证金：0; }
.multiSelectorCountry {位置：亲属;明确：两者;显示：无;边框：1px的固体ThreeDLightShadow;宽度：275px; }
.multiSelector {立场：绝对的; visibility：hidden的;边框：1px的固体ThreeDLightShadow;宽度：275px; }
.mutliselect_container {填充：0;保证金：0;边框：0;显示：内联; }
.chkSelectAll {填充左：的3px; }
.selectList {背景颜色：#FFFFFF;溢出：汽车;高度：200像素; _height：150像素; / *对于IE 6 * /}
.chklstSelect INPUT {浮动：左;宽度：20像素; / *要对齐FF *的chkbox文/}
.chklstSelect LABEL的{text-align：left进行;浮动：权利;宽度：230px; / *要对齐FF *的chkbox文/}
#imgMultiSelectArrow {宽度：20像素;高度：20像素;保证金左：300像素;填充左：300像素; }
.multiselect_close {填充：4PX 0;浮动：权利;宽度：65px;背景：透明的网址（https://careers.microsoft.com/images/close_btn.gif）不重复33px中心; }＆LT; /风格＆GT;
＆LT;标题＆GT;无标题页＆LT; /标题＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV CLASS =CTRL＆GT;
＆LT;输入类型=文本VALUE =软件工程：开发只读=只读级=MultiSelectControl_txtInput/＆GT;
＆LT; 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.gifALT =显示/隐藏的风格=高度：20像素;宽度：20像素，边框宽度：0像素; /＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =ms_multiSelector＆GT; ＆LT; DIV ID =选择列表级=ms_selectList＆GT;
＆LT;输入类型=复选框VALUE =allcountry级=ms_chkSelectAll/＆GT;
＆LT;跨度类=ms_chkSelectAll＆GT;选择全部＆LT; / SPAN＆GT;＆LT; DIV＆GT;
＆LT;输入类型=复选框价值=1/＆GT;
＆LT;标签＆gt;商业服务与放大器;管理与LT; /标签＆gt;
＆LT; BR /＆GT;
＆LT;输入类型=复选框价值= '37'/＆GT;
＆LT;标签＆gt;客户服务与;支持与LT; /标签＆gt;
＆LT; BR /＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
在HTML select元素的唯一有效的孩子们选择，OPTGROUP。我强烈建议没有创造任何形式的不规范形式的控制，你会被击败的无障碍。我建议你使用标准窗体控件中，只有标签要素的标准方式。您可以使用CSS和JavaScript，但不会改变可视人流订单或标签顺序也违背了无障碍修改这些表单控件的外观和互动性，以你的心内容。
到Microsoft形式访问的替代方法是使用标准的选择列表用多的属性，使多个选项可以从单个列表中选择。下面是一个例子：
＆LT;选择一个id =myselectlistNAME =myselectlist多个=多＆GT;
＆LT;期权价值=选项1＆GT;选项1 LT; /选项＆GT;
＆LT; /选择＆GT;
您可以使用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屋！
