选择列表中的HTML复选框

时间：2009-10-01 09:30:42

标签： javascript jquery html asp.net-mvc css

我正在尝试在选择列表中构建一个复选框列表（就像这里的国家/地区一样：link text）

我正在使用Asp.net MVC所以它需要是纯/ html＆amp; |的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>

6 个答案:

答案 0 :(得分：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>

Fiddle

答案 1 :(得分：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>

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

答案 2 :(得分：4)

我为选择列表中的复选框尝试了很多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

答案 3 :(得分：2)

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

这不是一个标准的HTML控件，他们使用一系列文本输入和div构建它，你必须做很多工作才能重现这种行为，以便它可以工作（可能使用任何浏览器）... < / p>

我不知道MVC有任何预先构建的帮助程序，也许JQuery有一些东西？无论如何，如果你找不到一个而你必须手动完成，也许你应该选择其他更多标准组件的方法（或者恢复为flash或silverlight，这对于这种自定义更加方便）。

答案 4 :(得分：2)

除了添加

之外，您可以尝试保留它 
.ms_selectList{ display: none; }

将上述内容添加到ms_selectList

已有的内容中

然后在jquery中有一个点击函数，它会使ms_selectList显示时钟基本上使它看起来像一个选择框，当它真的只是一个绝对定位的div标签，里面有一堆复选框。

jquery应该是这样的，

$(document).ready(function(){

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

})

答案 5 :(得分：0)

这不是标准的HTML表单控件，它是由开发人员自定义构建的。

我不知道存在任何可以为您重现此行为的开源解决方案。我担心你看起来不太可能在不费力的情况下实现这一目标。

相关问题
最新问题