jq中 attr 和 prop 的区别(例子:按钮的全选和全不选-checked)

官方的解释完全看不懂.相信我你也看不懂 /滑稽.

项目需求:

点击上方的checkBox时,下方的checkBox全部选中;

遇到问题:

一开始写成的是:

$("input[type='CheckBox']").attr('checked',true);

这时候点击是无效的,就改成:

$("input[type='CheckBox']").prop('checked',true);

结果是有效的;

得出结论:

prop的第二个参数支持布尔值类型,也能返回布尔值;

原意是:

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

举个栗子:

伪代码:

//点击上方(头部)按钮的时候,下方按钮全部选中并出现批量删除按钮
//点击下方按钮任意一个,批量删除按钮出现

代码:

    // 点击上方(头部)按钮出现批量删除按钮
    $('thead input[type=checkbox]').click(function(){
      //prop返回的是布尔值,判断上方按钮是true还是false
      var thisChecked = $(this).prop('checked');
      //下方(身体)按钮的值是true还是false就由刚上方按钮定义的变量决定了,也就是上方true下方就是true;
      $('tbody input[type=checkbox]').prop('checked',thisChecked);
      //如果上方按钮是勾选了,批量删除按钮就出现;
      if(thisChecked==true){
        $('.page-action a').fadeIn();
      }else{
        $('.page-action a').fadeOut();
      }
    })

     //给下方按钮动态绑定点击事件
     $('tbody').on('click','input[type=checkbox]',function(){
      //记录下方按钮总的个数
        var totalNum= $('tbody input[type=checkbox]').length;

      //记录下方按钮有多少是勾选了的
        var checkedNum = $('tbody input[type=checkbox]:checked').length;

      //对上方按钮点击进行判断,如果下方按钮的总数等于下方按钮勾选的总数,那么上方按钮也会选中
        $('thead input[type=checkbox]').prop('checked',totalNum==checkedNum);

      //判断如果下方按钮都没有勾选,那么就让批量删除按钮消失
        if(checkedNum!=0){
          $('.page-action a').fadeIn();
        }else{
          $('.page-action a').fadeOut();
        }
    })