有人可以帮我吗,如何在带有点击事件的 li 内停止选中复选框两次?我尝试添加 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/> Automobily </li>
<li class="small" data-value="option3" tabIndex="-1"><input type="checkbox" checked/> Nákladní auta </li>
<li class="small" data-value="option4" tabIndex="-1"><input type="checkbox" checked/> Autobusy </li>
<li class="small" data-value="option5" tabIndex="-1"><input type="checkbox" checked/> Prodej ojetých vozů </li>
<li class="small" data-value="option6" tabIndex="-1"><input type="checkbox" checked/> Komponenty </li>
<li class="small" data-value="option7" tabIndex="-1"><input type="checkbox" checked/> 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;
});
最佳答案
您的选项
代表选中
复选框,并且它是空的(即使您的所有复选框都已选中)。
要解决此问题,您应该将选中的复选框的所有 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/> Automobily </li>
<li class="small" data-value="option3" tabIndex="-1"><input type="checkbox" checked/> Nákladní auta </li>
<li class="small" data-value="option4" tabIndex="-1"><input type="checkbox" checked/> Autobusy </li>
<li class="small" data-value="option5" tabIndex="-1"><input type="checkbox" checked/> Prodej ojetých vozů </li>
<li class="small" data-value="option6" tabIndex="-1"><input type="checkbox" checked/> Komponenty </li>
<li class="small" data-value="option7" tabIndex="-1"><input type="checkbox" checked/> Alternativní pohony </li>
</ul>
</li>
</ul>
</div>
关于jquery - li 标签中选中的复选框必须单击两次才能取消选中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40938032/