テキストをクリックしてチェックボックスを選択する

Question

JSFiddle Here

これは、ドロップダウンメニュー内のチェックボックスのリストです。アンカータグのテキストをクリックして対応するチェックボックスを選択したいと考えています。しかし、私は現在、<a href="#">に設定しています。単にドロップダウンを閉じ、ページの先頭に移動します（オーバーレイ上にあるため、JSFiddleではなく自分のバージョンで）。

チェックボックスを選択したソリューションが表示されましたが、各クリックでドロップダウンが閉じられていましたが、これを解決する簡単な方法はありますか？

Answer 1

この機能にはラベルを使用できます。 <ul>リストをこのリストに置き換えてください。

<ul class="dropdown-menu"> 
    <li> 
    <input type="checkbox" id="check_1"/> 
    <label for="check_1">Item 1</label> 
    </li> 
    <li> 
    <input type="checkbox" id="check_2"/> 
    <label for="check_2">Item 2</label> 
    </li> 
    <li> 
    <input type="checkbox" id="check_3"/> 
    <label for="check_3">Item 3</label> 
    </li> 
</ul> 

これは、あなたがこのようにそれをachiveすることができます

Answer 2

$('.dropdown-menu a').click(function(event){ 
 
    event.preventDefault(); 
 
    var checkBox = $(this).find(':checkbox'); 
 
    checkBox.prop("checked", !checkBox.prop("checked")); 
 
})

@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/css/bootstrap.min.css');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script> 
 

 

 
<label for="display">Display</label><br/> 
 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" id="display" data-toggle="dropdown"> 
 
    Select Options 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu"> 
 
    <li> 
 
     <a href="#"> 
 
     <input type="checkbox">Item 1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <input type="checkbox">Item 2</a> 
 
    </li> 
 
    <li> 
 
    
 
     <a href="#"> 
 
     <input type="checkbox">Item 3</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 3

のに役立ちます。

$('a').on("click",function(e) { 
    e.preventDefault(); 
    var checkbox = $(this).children("input"); 
    $(checkbox[0]).attr('checked', !checkbox.attr('checked')); 
}); 

フィドル：http://jsfiddle.net/u614sy0L/5/