选择列表中的HTML复选框

Question

选择列表中的HTML复选框

Lee*_*ith 6 html javascript css asp.net-mvc jquery

我正在尝试在选择列表中构建一个复选框列表(如此处的国家/地区:链接文本)

我正在使用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

gav*_*koa 8

符合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>

Run Code Online (Sandbox Code Playgroud)

小提琴

很好的实施:) (3认同)

Answer 2

小智 6

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

Microsoft表单的可访问替代方法是使用具有"multiple"属性的标准选择列表,以便可以从单个列表中选择多个选项.这是一个例子:

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

Run Code Online (Sandbox Code Playgroud)

您可以使用CSS来伪造复选框的外观,其中复选框的外观为选项的伪类"活动"中显示的背景图形.但是,我不会比这更进一步.

Answer 3

Pal*_*tir 2

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

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

我不知道有任何针对 MVC 的预构建帮助程序，也许有一些针对 JQuery 的帮助程序？无论如何，如果您找不到一个并且必须手动执行此操作，也许您应该选择具有更多标准组件的其他方法（或者恢复到 flash 或 silverlight，这对于此类自定义更方便）。

归档时间：	16 年，11 月前
查看次数：	27321 次
最近记录：	10 年，3 月前