jQuery输入类型复选框prop（“ checked”，false / true）进行相反的操作

Question

我有一个HTML复选框元素，其中Label元素通过Label的“ for”属性链接到它，我试图通过捕获Label元素的click事件来选中/取消选中复选框元素， br />有人可以说出这段代码为什么与预期相反吗？

$("label").click(function() {

  $(this).toggleClass("active");

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

    $("#checker").prop("checked", true);
    console.log("checked");
    
  } 
  
  else {
    
    $("#checker").prop("checked", false);
    console.log("unchecked");

  }

});

.active {
  background: green;
  color: white
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for='checker'>Check it</label>
<input type='checkbox' id='checker'>

这段代码可以正常工作。

$("label").click(function(){
		
		$(this).toggleClass("active");
		
		if($(this).hasClass("active")){
		
			setTimeout(function(){
				$("#checker").prop("checked",true);
			},0);
			console.log("checked");
      
		}
					
		else{

			setTimeout(function(){
				$("#checker").prop("checked",false);
			},0);
      console.log("unchecked");
			
		}
			
});

.active {
  background: green;
  color: white
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for='checker'>Check it</label>
<input type='checkbox' id='checker'>

Answer 1

之所以会发生这种情况，是因为单击链接到libb的{​​{1}}元素（此处您的label的类型是input）的点击会更改复选框的状态。

只需通过调用传递给处理程序的Event参数的.preventDefault()方法，就可以防止这种行为。

这是一个演示：

input

checkbox

// we're passing the Event to the handler, notice the argument 'e'.
$("label").click(function(e) {
  // disable the default behaviour of the click.
  e.preventDefault();
  $(this).toggleClass("active");
  if ($(this).hasClass("active")) {

    $("#checker").prop("checked", true);
    console.log("checked");
    
  } 
  
  else {
            $("#checker").prop("checked", false);
    console.log("unchecked");

  }

});

希望我进一步推动了你。

Answer 2

遇到类似的问题，解决我的问题的方法是：

$(document).on('click', "label", function(event) {
  $("#checker").prop('checked', event.target.checked);
}).unbind('click', "label");