label checkbox点击触发两次原因及解决方法

原因：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");       

      }    

})