[英]How do I create a drop down menu with a list of check boxes with labels using bootstrap?
I have found a few tutorials that explain this in one form or another. 我发现一些教程以一种或另一种形式对此进行了解释。 Most don't implement it with bootstrap, and the ones that do tend to be a few years old.
大多数都没有使用bootstrap来实现它,而那些确实有几年的历史了。
I am unsure where to even start with this. 我不确定从哪里开始。
My app is using AngularJS on the client, if that matters. 如果重要的话,我的应用程序正在客户端上使用AngularJS。
Edit: Here's one of the tutorials I am talking about. 编辑:这是我正在谈论的教程之一。 http://www.benknowscode.com/2014/09/option-picker-bootstrap-dropdown-checkbox.html
http://www.benknowscode.com/2014/09/option-picker-bootstrap-dropdown-checkbox.html
On this link you can find a working example: 在此链接上,您可以找到一个有效的示例:
http://codepen.io/bseth99/pen/fboKH http://codepen.io/bseth99/pen/fboKH
HTML: 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"/> Option 1</a></li>
<li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/> Option 2</a></li>
<li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox"/> Option 3</a></li>
<li><a href="#" class="small" data-value="option4" tabIndex="-1"><input type="checkbox"/> Option 4</a></li>
<li><a href="#" class="small" data-value="option5" tabIndex="-1"><input type="checkbox"/> Option 5</a></li>
<li><a href="#" class="small" data-value="option6" tabIndex="-1"><input type="checkbox"/> Option 6</a></li>
</ul>
</div>
</div>
</div>
</div>
JS: 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;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.