liタグのチェックボックスを2回クリックしてチェックを外す必要があります

Question

クリックイベントでli内でチェックボックスを2回チェックする方法を教えてください。 e.stopPropagation関数を追加しようとしましたが、機能しませんでした。

<div class="dropdown"> 
     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
     Obor 
     <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
     <li class="dropdown-submenu"><a tabindex="-1" href="#">Automotive </a> 
      <ul class="dropdown-menu"> 
    <li class="small" data-value="option2" tabIndex="-1"><input type="checkbox" checked/>&nbsp;Automobily </li> 
    <li class="small" data-value="option3" tabIndex="-1"><input type="checkbox" checked/>&nbsp;Nákladní auta </li> 
    <li class="small" data-value="option4" tabIndex="-1"><input type="checkbox" checked/>&nbsp;Autobusy </li> 
    <li class="small" data-value="option5" tabIndex="-1"><input type="checkbox" checked/>&nbsp;Prodej ojetých vozů </li> 
    <li class="small" data-value="option6" tabIndex="-1"><input type="checkbox" checked/>&nbsp;Komponenty </li> 
    <li class="small" data-value="option7" tabIndex="-1"><input type="checkbox" checked/>&nbsp;Alternativní pohony </li> 
      </ul></li></ul></div> 

はjavascript：

var options = []; 
$('.dropdown-menu .small').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; 
}); 

Answer 1

あなたoptionsはcheckedチェックボックスを表し、それは（あなたのチェックボックスのすべてがチェックされていても）空です。
これを修正するには、チェックボックスのすべてのli親の値をoptions変数に入れてください。

あなたはそうするためにこれを使用することができます：ここで

options = $("input[type='checkbox']:checked").map(function() { 
    return $(this).parent('li').data('value') 
}).get(); 

は、それはあなたのコード内でどのように見えるかです：

var options = []; 
 
options = $("input[type='checkbox']:checked").map(function() { 
 
    return $(this).parent('li').data('value') 
 
}).get(); 
 

 
$('.dropdown-menu .small').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> 
 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
    Obor 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
    <li class="dropdown-submenu"><a tabindex="-1" href="#">Automotive </a> 
 
     <ul class="dropdown-menu"> 
 
     <li class="small" data-value="option2" tabIndex="-1"><input type="checkbox" checked/>&nbsp;Automobily </li> 
 
     <li class="small" data-value="option3" tabIndex="-1"><input type="checkbox" checked/>&nbsp;Nákladní auta </li> 
 
     <li class="small" data-value="option4" tabIndex="-1"><input type="checkbox" checked/>&nbsp;Autobusy </li> 
 
     <li class="small" data-value="option5" tabIndex="-1"><input type="checkbox" checked/>&nbsp;Prodej ojetých vozů </li> 
 
     <li class="small" data-value="option6" tabIndex="-1"><input type="checkbox" checked/>&nbsp;Komponenty </li> 
 
     <li class="small" data-value="option7" tabIndex="-1"><input type="checkbox" checked/>&nbsp;Alternativní pohony </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>