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 prop方法替代attr方法
jquery attr()方法获取标签的 checked 会有问题,所以用了 prop() 方法.
- jquery全选 不全选
<input type="checkbox" id="check">点击 <input type="checkbox" c ...
- jQuery prop() 方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery实现全选、取消反选、加JavaScript三元运算(三种法法实现反选)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery中attr方法和prop方法的区别
关于checked的属性,最重要的概念就是你要记住,它跟checked的状态值是毫无关系的,设置checked = "checked"或者checked = "true& ...
- jquery attr()和prop()方法的区别
$('').attr()返回的是html对象 $('').prop()返回的是DOM对象 attr(): attr() 方法设置或返回被选元素的属性和值. 当该方法用于返回属性值,则返回第一个匹配元素 ...
- JQuery常见方法
<!DOCTYPE htmi> <html> <head> <meta charset="UTF-8"> <title> ...
- js prop方法
添加和删除属性 $("button").click(function(){ var $x = $("div"); <!--添加属性--> $x.pr ...
- jquery操作checkbox方法(全选、全不选、至少选择一个、选择值/文本)
原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...
随机推荐
- iOS 倒计时
// // RootViewController.m // MyTimerDemo // // Created by huluo on 1/21/14. // Copyright (c) 2014 b ...
- 矩形嵌套(LIS)
矩形嵌套 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅当a& ...
- LightOJ 1085(树状数组+离散化+DP,线段树)
All Possible Increasing Subsequences Time Limit:3000MS Memory Limit:65536KB 64bit IO Format: ...
- 我的经常使用linux小命令
这里并非系统具体介绍每个Linux命令,不过记录本人在平时工作中经经常使用到的一些比較基础的命令及相关的參数,同一时候用了一些简单的样例来说明这些命令的用途,以及怎样用多种命令来实现同一种功能 ...
- Java开发常用下载的网址
cygwin国内镜像:http://mirrors.sohu.com/cygwin/ 旧版本的ant下载:http://archive.apache.org/dist/ant/ 旧版本的nutch下载 ...
- TCP/IP协议族
1.TCP(传输控制协议)/IP(网际协议)协议族是一个网络通讯模型,以及一整个网络传输协议家族,为互联网的基础通讯架构. TCP/IP四层协议的表示方法: 2.TCP/IP参考模型映射到OSI模型: ...
- tmux 命令
创建并指定session名字tmux new -s $session_name 删除sessionCtrl+b :kill-session 临时退出sessionCtrl+b d 列出sessiont ...
- 后缀数组的一些性质----height数组
height数组:定义 height[i] = suffix[i-1] 和 suffix[i] 的最长公共前缀,也就是排名相邻的两个后缀的最长公共前缀.那么对于 j 和 k 不妨设 Rank[j] & ...
- CTreeCtrl点击获得选中项
相应TVN_SELCHANGED可以得到选中的项,在相应函数内如下: LPNMTREEVIEW pNMTreeView = reinterpret_cast<LPNMTREEVIEW>(p ...
- NodeJS爬虫系统初探
NodeJS爬虫系统 NodeJS爬虫系统 0. 概论 爬虫是一种自动获取网页内容的程序.是搜索引擎的重要组成部分,因此搜索引擎优化很大程度上是针对爬虫而做出的优化. robots.txt是一个文本文 ...