jquery prop()方法 解决全选 不全选 反选 问题 解决执行一次不不能再执行问题
Posted LCFLY
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery prop()方法 解决全选 不全选 反选 问题 解决执行一次不不能再执行问题相关的知识，希望对你有一定的参考价值。
//1、如果通过prop()函数更改<input>和<button>元素的type属性，在多数浏览器上将会抛出一个错误，因为该属性一般不允许在后期更改。
//如果使用prop()函数操作表单元素的checked、selected、disabled等属性，如果该元素被选中(或禁用)，则返回true，否则(意即html中没有该属性)返回false。
//3、prop()函数还可以设置或返回DOM元素的Element对象上的某些属性，例如：tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等属性。
//在IE9及更早版本中，如果使用prop()函数设置的属性值不是一个简单的原始值(String、Number、Boolean)，并且在对应的DOM元素被销毁之前，该属性没有被移除，则可能会导致内存泄漏问题。如果你只是为了存储数据，建议你使用data()函数，以避免内存泄漏问题。
<script>
$(function () { $("#j_cbAll").click(function () { //如果全选按钮被选中 则所有按钮军被选中 上面有prop用法 用prop()方法解决执行一次之后不能再全选问题 $("#j_tb :checkbox").prop("checked", $(this).prop("checked")); }); $("#j_tb :checkbox").click(function () { singleClick(); }); $("#fanxuan").click(function () { $("#j_tb :checkbox").each(function () { //反选 $(this).prop("checked", !$(this).prop("checked")); singleClick(); }); }); // 如果有一个子的checkbox没有选中，全选不选中 如果子的checkbox都选中了，全选选中 function singleClick(){ //如果子元素没有被选中 全选不选中 if(!$("#j_tb :checkbox").checked){ $("#j_cbAll").prop("checked",false); } //checkbox的个数 var chsub = $("#j_tb :checkbox").length; //checkbox选中的个数 var checkedsub = $("#j_tb :checkbox:checked").length;
//判断选择个数与所有个数是否相同 if (checkedsub === chsub) {
//全选按钮被选中 $("#j_cbAll").prop("checked", true); }; } });
</script>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" name="checkbox" />
</td>
<td>红烧肉</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox" />
</td>
<td>西红柿鸡蛋</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox" />
</td>
<td>红烧狮子头</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox" />
</td>
<td>日式肥牛</td>
<td>田老师</td>
</tr>
<tr>
<td id="fanxuan">反选</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
以上是关于jquery prop()方法 解决全选 不全选 反选 问题 解决执行一次不不能再执行问题的主要内容，如果未能解决你的问题，请参考以下文章
jquery实现复选框打勾全选，其中一个子复选框不勾中，则不全选。所有子复选框全勾中则又全选。