我如何创建一个下拉菜单与标签的复选框列表使用bootstrap

How do I create a drop down menu with a list of check boxes with labels using bootstrap?

本文关键字：复选框 标签 bootstrap 列表 一个 何创建 创建 下拉菜单      更新时间：2023-09-26

我找到了一些教程，以这种或那种形式解释了这一点。大多数都不使用bootstrap实现它，而那些使用bootstrap的往往是几年前的。

我不确定从哪里开始。

我的应用在客户端使用AngularJS，如果这很重要的话。

编辑:这是我正在谈论的教程之一。http://www.benknowscode.com/2014/09/option-picker-bootstrap-dropdown-checkbox.html

您可以在此链接中找到一个工作示例:

http://codepen.io/bseth99/pen/fboKH

HTML: 

<br/>
<div class="container">
  <div class="row">
       <div class="col-lg-12">
     <div class="button-group">
        <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
<ul class="dropdown-menu">
  <li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 1</a></li>
  <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 2</a></li>
  <li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 3</a></li>
  <li><a href="#" class="small" data-value="option4" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 4</a></li>
  <li><a href="#" class="small" data-value="option5" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 5</a></li>
  <li><a href="#" class="small" data-value="option6" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 6</a></li>
</ul>
  </div>
</div>
  </div>
</div>

JS: 

var options = [];
$( '.dropdown-menu a' ).on( 'click', function( event ) {
   var $target = $( event.currentTarget ),
       val = $target.attr( 'data-value' ),
       $inp = $target.find( 'input' ),
       idx;
   if ( ( idx = options.indexOf( val ) ) > -1 ) {
      options.splice( idx, 1 );
      setTimeout( function() { $inp.prop( 'checked', false ) }, 0);
   } else {
      options.push( val );
      setTimeout( function() { $inp.prop( 'checked', true ) }, 0);
   }
   $( event.target ).blur();
   console.log( options );
   return false;
});
相关文章：