jQuery操作checkbox第三次次失效方法

一、问题出现及解决方法

今天写一个带复选框的下拉列表，需求点击复选框input选中点击文字复选框选中：

  

点击文字 属性变了，但是input并没有选中！

代码

$('.drop_list_con').children('li').each(function(index) {
      $('li span').click(function(event) {
        let checkbox = $(this).prev('input:checkbox');
        if(checkbox.attr('checked')){
            checkbox.attr('checked',false);
        } else{
            checkbox.attr('checked', true);
        }
      });
  });

解决方法：

$('.drop_list_con').children('li').each(function(index) {
      $('li span').click(function(event) {
        let checkbox = $(this).prev('input:checkbox');
        if(checkbox.prop('checked')){
            checkbox.prop('checked',false);
        } else{
            checkbox.prop('checked', true);
        }
      });
  });

是的把attr改为prop就可以了。

原因：jQuery版本的问题。对于$(“**”).attr(“attrName”)，jQuery API明确说明，1.6+的jQuery要用prop，尤其是checkBox的checked的属性的判断。所以将代码更改如下即可解决问题。

在新版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两者区别？
关于它们两个的区别，查了很多资料，其实总归很简单：
HTML元素本身就带有的固有属性，在处理时，使用prop方法。
HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。