php中input加check事件,label checkbox点击触发两次原因及解决方法

原因：label和input标签嵌套，点击label的时候，事件冒泡一次，同时会触发关联的input的click事件，导致事件再次冒泡，以至于达不到我们想要的触发效果。

不使用js解决方法：将input放到label外面(推荐使用这种方法) hello world

js处理方法：

方法一、对event.target进行判断$(".multi-list").on("click","label.checkBtn",function(event){

if($(event.target).is('input')){//对点击目标元素做判断

return;

}

if($(this).hasClass("selected")){

console.log("删除");

$(this).removeClass("selected");

}else{

console.log("选中");

$(this).addClass("selected");

}

})

方法二、将事件绑定在input checkbox上，我们就不会触发label的click事件了$(".multi-list").on("click","input.checkbox",function(){

if(!$(this).parent().hasClass('selected')){

console.log("选中");

$(this).parent().addClass("selected");

}else{

console.log("删除");

$(this).parent().removeClass("selected");

}

})