prop和attr的比较

prop来获取或设置固有属性  removeProp()  删除固有属性

attr来获取或设置自定义属性     removeAttr() 删除自定义属性

案例:全选与全不选

 

<body>
<table border="1" cellpadding="5" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" id="theadCheckbox"/>id</th>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tbodyCheckbox">
<tr>
<td><input type="checkbox" id="" value="" name="boxs"/>1</td>
<td>张三</td>
<td>男</td>
<td>18210528452</td>
<td>20</td>
</tr>
<tr>
<td><input type="checkbox" id=" " value=" " name="boxs"/>2</td>
<td>张三</td>
<td>男</td>
<td>18210528452</td>
<td>20</td>
</tr>
<tr>
<td><input type="checkbox" id="" value="" name="boxs"/>3</td>
<td>张三</td>
<td>男</td>
<td>18210528452</td>
<td>20</td>
</tr>
<tr>
<td><input type="checkbox" id=" " value=" " name="boxs"/>4</td>
<td>张三</td>
<td>男</td>
<td>18210528452</td>
<td>20</td>
</tr>
<tr>
<td><input type="checkbox" id="" value="" name="boxs"/>5</td>
<td>张三</td>
<td>男</td>
<td>18210528452</td>
<td>20</td>
</tr>
</tbody>
</table>

 

</body>

 

 

<script>

 $("#theadCheckbox").click(function(){

var flag=$(this).is(":checked");

if(flag){

$("#tbodyCheckbox").find(":checkbox").prop("checked",true) 

}else{

$("#tbodyCheckbox").find(":checkbox").removeAttr("checked")

})

$("#tbodyCheckbox").find(":checkbox").click(function(){

var checkedLength=$("#tbodyCheckbox").find(":checked").length;

var checkboxLength=$("#tbodyCheckbox").find(":checkbox").length;

if(checkboxLength==checkedLength){

$("#theadCheckbox").prop("checked",true)

}else{

$("#theadCheckbox").removeAttr("checked")

 

</script>

posted @ 2018-01-11 14:30  菜鸡~大神  阅读(187)  评论(0编辑  收藏  举报