开发技术学习

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

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

  <input type="checkbox" value="" name="test" id="test" /> <label for="test" class="testCbox">hello world</label>

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");       
      }    
})

文章来源：https://www.jianshu.com/p/ca77eabbb161