ドロップダウンの上部にあるチェックボックス

Question

チェックボックスの上部にドロップダウンが必要です。 -5チェックボックスではなく、うまくいきませんでした：画像は

を追加したと同じように、私は余裕トップにしようとしたと思う チェックボックスとドロップダウンの両方は、独自の機能 を持っています。

これを行う方法

Answer 1

これがあなたに役立つことを願っています！

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; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<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-check"></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>