gpt4 book ai didi

jquery - li 标签中选中的复选框必须单击两次才能取消选中

转载 作者:行者123 更新时间:2023-12-01 01:21:55 25 4
gpt4 key购买 nike

有人可以帮我吗,如何在带有点击事件的 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/>&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;
});

最佳答案

您的选项代表选中复选框,并且它是空的(即使您的所有复选框都已选中)。
要解决此问题,您应该将选中的复选框的所有 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>

关于jquery - li 标签中选中的复选框必须单击两次才能取消选中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40938032/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com