官方的解释完全看不懂.相信我你也看不懂 /滑稽.
项目需求:
点击上方的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(); } })