我正在使用 jQuery 编写一个简单的下拉菜单,每个项目都有一个复选框。当我点击 li
元素时,复选框被选中。但是,如果我单击复选框本身,它不会被选中,因为它实际上被选中了两次。我怎样才能阻止这种情况发生?
jsFiddle:http://jsfiddle.net/ZEp7V/
HTML:
<div id="dropdown">Channels</div>
<ul class="droplist">
<li>News <input type="checkbox" /></li>
<li>Sport <input type="checkbox" /></li>
<li>Science <input type="checkbox" /></li>
<li>Health <input type="checkbox" /></li>
<li>All</li>
</ul>
CSS:
div#dropdown {
border: 1px solid #000;
width: 150px;
height: 20px;
line-height: 20px;
padding: 10px;
cursor: pointer;
}
ul.droplist {
display: none;
width: 170px;
border: 1px solid #000;
border-bottom: none;
list-style-type: none;
padding: 0px;
margin: 0px;
position: absolute;
background-color: #fff;
}
ul.droplist li {
border-bottom: 1px solid #000;
padding: 10px;
cursor: pointer;
}
ul.droplist li input {
float: right;
}
JS:
$(document).ready(function(){
$("#dropdown").click(function() {
$(this).next().slideToggle(200);
});
$(".droplist li").click(function(e) {
// Toggle the checkbox
var input = $(this).children("input");
$(input).prop("checked", !$(input).prop("checked"));
});
$(".droplist li:last").click(function () {
// Select all boxes
var check = $('.droplist li input:not(:checked)').length;
$(".droplist li input").prop("checked", check);
});
});
最佳答案
您可以 stop the propagation复选框中的事件:
$(".droplist li :checkbox").click(function (e) {
e.stopPropagation();
});
这将防止事件向上冒泡 DOM 树到父 li
元素(如您所说,它会触发绑定(bind)到它的事件处理程序)。
附带说明一下,您可以修改代码以利用事件委托(delegate),这样效率更高,因为每个 li
元素只有一个事件处理程序,而不是一个。例如:
$(".droplist").on("click", "li", function (e) {
// Toggle the checkbox
var input = $(this).children("input");
$(input).prop("checked", !$(input).prop("checked"));
});
参见 .on()
方法了解更多详情。
关于javascript - 在带有单击事件的 li 中停止复选框被选中两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11324851/