從下面的複選框下拉

Question

我正在開發一個asp.net網站，我想包括在我的html使用asp與複選框的dropdwon菜單，我想知道這些複選框是否被選中。如果有人能幫助我嗎？

Answer 1

您將需要使用JavaScript/jQuery來防止下拉從當你點擊複選框切換。下面是一個例子下拉與複選框：

HTML：

<dl class="dropdown"> 

    <dt> 
    <a href="#"> 
     <span class="hida">Select</span>  
     <p class="multiSel"></p> 
    </a> 
    </dt> 

    <dd> 
     <div class="mutliSelect"> 
      <ul> 
       <li> 
        <input type="checkbox" value="Apple" />Apple</li> 
       <li> 
        <input type="checkbox" value="Blackberry" />Blackberry</li> 
       <li> 
        <input type="checkbox" value="HTC" />HTC</li> 
       <li> 
        <input type="checkbox" value="Sony Ericson" />Sony Ericson</li> 
       <li> 
        <input type="checkbox" value="Motorola" />Motorola</li> 
       <li> 
        <input type="checkbox" value="Nokia" />Nokia</li> 
      </ul> 
     </div> 
    </dd> 
    <button>Filter</button> 
</dl> 

CSS：

body { 
    font: normal 14px/100% "Andale Mono", AndaleMono, monospace; 
    color:#fff; 
    padding: 50px; 
    width: 300px; 
    margin: 0 auto; 
    background-color: #374954; 

} 
a { 
    color:#fff; 
} 
.dropdown dd, .dropdown dt { 
    margin:0px; 
    padding:0px; 
} 
.dropdown ul { 
    margin: -1px 0 0 0; 
} 
.dropdown dd { 
    position:relative; 
} 
.dropdown a, 
.dropdown a:visited { 
    color:#fff; 
    text-decoration:none; 
    outline:none; 
    font-size: 12px; 
} 
.dropdown dt a { 
    background-color:#4F6877; 
    display:block; 
    padding: 8px 20px 5px 10px; 
    min-height: 25px; 
    line-height: 24px; 
    overflow: hidden; 
    border:0; 
    width:272px; 
} 
.dropdown dt a span, .multiSel span { 
    cursor:pointer; 
    display:inline-block; 
    padding: 0 3px 2px 0; 
} 
.dropdown dd ul { 
    background-color: #4F6877; 
    border:0; 
    color:#fff; 
    display:none; 
    left:0px; 
    padding: 2px 15px 2px 5px; 
    position:absolute; 
    top:2px; 
    width:280px; 
    list-style:none; 
    height: 100px; 
    overflow: auto; 
} 
.dropdown span.value { 
    display:none; 
} 
.dropdown dd ul li a { 
    padding:5px; 
    display:block; 
} 
.dropdown dd ul li a:hover { 
    background-color:#fff; 
} 
button { 
    background-color: #6BBE92; 
    width: 302px; 
    border: 0; 
    padding: 10px 0; 
    margin: 5px 0; 
    text-align: center; 
    color: #fff; 
    font-weight: bold; 
} 

JS：

$(".dropdown dt a").on('click', function() { 
      $(".dropdown dd ul").slideToggle('fast'); 
     }); 

     $(".dropdown dd ul li a").on('click', function() { 
      $(".dropdown dd ul").hide(); 
     }); 

     function getSelectedValue(id) { 
      return $("#" + id).find("dt a span.value").html(); 
     } 

     $(document).bind('click', function (e) { 
      var $clicked = $(e.target); 
      if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide(); 
     }); 


     $('.mutliSelect input[type="checkbox"]').on('click', function() { 

      var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(), 
       title = $(this).val() + ","; 

      if ($(this).is(':checked')) { 
       var html = '<span title="' + title + '">' + title + '</span>'; 
       $('.multiSel').append(html); 
       $(".hida").hide(); 
      } 
      else { 
       $('span[title="' + title + '"]').remove(); 
       var ret = $(".hida"); 
       $('.dropdown dt a').append(ret); 

      } 
}); 

Codepen與上面的代碼：http://codepen.io/ElmahdiMahmoud/pen/hlmri

（作者在codepen屬性可用）

Answer 2

你應該

• 確保您指定唯一的ID爲每個checkbox elements。

使用JQuery：

$('#' + id).is(":checked")