HTML复选框中选择列表

问题描述：

我试图建立一个选择列表中的复选框列表（如一个国家在这里：link text）HTML复选框中选择列表

我使用Asp.net MVC所以它必须是纯/ html & |的JavaScript/JQuery的。这可能吗？或者是否已经有一个可以下载的prebuild？

感谢

剥去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（上图）撕掉了。我会去玩一下，看看会发生什么。 – 2009-10-01 10:51:28

我结束了使用这一个：http://code.google.com/p/dropdown-check-list/ – 2009-11-18 12:48:30

答

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

这不是一个标准的HTML控件，他们建立了它一系列的文本输入和divs，你必须做很多工作来重现这种行为，以便它的工作（可能与任何浏览器）...

我不知道任何预建他MVC的lpers，也许有一些JQuery？无论如何，如果你找不到一个，你必须手动做到这一点，也许你应该选择其他手段与更多的标准组件（或恢复到闪光灯或silverlight这是更方便这种定制）。

答

这不是一个标准的HTML表单控件，它是由开发人员定制的。

我不知道有任何开源解决方案可以为您重现此行为。恐怕看起来不太可能，您可以在不付出更多努力的情况下完成此项工作，而不会付出更多的努

答

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

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

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

你可以使用CSS来假冒复选框的外观与选中的复选框的外观，从该选项的伪类的“主动”出现的背景图案。但是，我不会比这更进一步。

我喜欢这个答案 - 尤其是如果你想更好地处理手机，平板电脑和其他设备。任何“从头开始”的内容可能都会有一个内部滚动条，就像一个带溢出的div：auto，大多数手机不支持（但它们支持标准列表/组合控件）。尽可能坚持标准。 – eselk 2013-04-16 22:29:38

答

你可以尝试只把它当作是非常不同的是加入

.ms_selectList{ display: none; }

上面添加到你已经拥有了ms_selectList

然后jQuery中有某种这将使的点击功能ms_selectList显示时钟基本上使它看起来像一个选择框，当它真的只是一个绝对定位的div标签与一堆复选框内。

而jQuery的应该是这样的，

$(document).ready(function(){ 

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

})

我结束了使用这一个：http://code.google.com/p/dropdown-check-list/ – 2009-11-18 12:47:57

答

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

尼斯实施:) – 2013-06-10 10:29:19

这很美！ – 2013-06-13 19:09:48

可悲的是不能使用msie9 – garyrgilbert 2013-07-15 10:11:35

答

我尝试了很多的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

HTML复选框中选择列表

相关推荐