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>

來源

2009-10-01 Lee Smith

感謝您輸入傢伙。我已經把網站上的一些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這是更方便這種定製）。

來源

2009-10-01 09:40:03 Palantir

這不是一個標準的HTML表單控件，它是由開發人員定製的。

我不知道有任何開源解決方案可以爲您重現此行爲。恐怕看起來不太可能，您可以在不付出更多努力的情況下完成此項工作，而不會付出更多的努

來源

2009-10-01 09:46:44 Evernoob

在HTML中，select元素的唯一有效子元素是option和optgroup。我強烈建議不要創建任何類型的非標準表單控件，因爲您將擊敗可訪問性。我建議您僅使用標籤元素以標準方式使用標準表單控件。您可以使用CSS和JavaScript將這些表單控件的外觀和交互性修改爲您的內容內容，但不要更改視覺流順序或Tab順序，因爲這也會影響可訪問性。

Microsoft窗體的可訪問替代方法是使用具有「多個」屬性的標準選擇列表，以便可以從單個列表中選擇多個選項。這裏有一個例子：

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

你可以使用CSS來假冒複選框的外觀與選中的複選框的外觀，從該選項的僞類的「主動」出現的背景圖案。但是，我不會比這更進一步。

來源

2009-10-01 10:04:23

我喜歡這個答案 - 尤其是如果你想更好地處理手機，平板電腦和其他設備。任何「從頭開始」的內容可能都會有一個內部滾動條，就像一個帶溢出的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(); 
    }); 

})

來源

2009-10-01 21:15:40

我結束了使用這一個：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-03-06 12:05:35 gavenkoa

尼斯實施:) – 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

來源

2014-08-20 21:45:16 pmrotule

HTML複選框中選擇列表

回答

相關問題