【javascript】如何在表格中进行全选、反选操作.

最新推荐文章于 2024-07-30 22:36:34 发布

笑起来贼好看

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量3k

点赞数 1

文章标签： jquery javascript js function

本文链接：https://blog.csdn.net/u013412066/article/details/44672505

版权

直接上HTML源码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type='text/css' href="line.css" />
</head>

<body>
    <table class='myTable'>
    	<tr class="headerTr">
        	<td><input type="checkbox" id="selectAll"><span>LAC-CI编码</span></td>
            <td>LAC-CI名称</td>
            <td>LAC-CI位置</td>
            <td>地域</td>
        </tr>
        <tr class="oddTr">
        	<td><input type="checkbox" >11111-116</td>
             <td>LAC-CI名称</td>
            <td>LAC-CI位置</td>
            <td>地域</td>
        </tr>
         <tr>
        	<td><input type="checkbox" >11111-116</td>
             <td>LAC-CI名称</td>
            <td>LAC-CI位置</td>
            <td>地域</td>
        </tr>
         <tr class="oddTr">
        	<td><input type="checkbox" >11111-116</td>
             <td>LAC-CI名称</td>
            <td>LAC-CI位置</td>
            <td>地域</td>
        </tr>
         <tr>
        	<td><input type="checkbox" >11111-116</td>
             <td>LAC-CI名称</td>
            <td>LAC-CI位置</td>
            <td>地域</td>
        </tr>
    </table>
<script type="text/javascript" src="jquery-1.9.1.js" ></script>
<script type="text/javascript" src="line.js" ></script>
</body>
</html>

Css代码如下：

*{	margin:0px;
	padding:0px;
}

.myTable{
	position:relative;
	margin:50px auto;
	border:0px solid rgba(255,255,255,0.3);
	widows:800px;
	height:500px;
}

.myTable td{
	width:10%;
	height:25px;
	line-height:35px;
	white-space:nowrap;
	text-decoration:none;
	text-align:center;
}

.headerTr{
	background:#CCC;
}

.myTable tr:nth-child(odd) {
	background:#CFF;
}

下面是JS代码：

$(function(){
	$("#selectAll").bind("click",function(){
		if($(this).prop("checked")){
			$("input[type='checkbox']").not(this).prop("checked",true);
		}else{
			$("input[type='checkbox']").not(this).prop("checked",false);
		}
	});
});

最开始一直用的是attr属性来判断selectAll复选框是否被选上。测试时发现。一直返回的是undefined.

我就纳闷了。这明明是选上了，值为true的。百思不得其解。然后翻看jQueryAPI发现：

【checked属性在页面初始化的时候已经初始化好了，不会随着状态的改变而改变。也就是说如果checkbox在页面加载完毕是选中的，那么返回的永远都是checked（我的一开始就是没选中）如果一开始没被选中，则返回的永远是undefined ！】

而Prop就是为了解决这个问题。prop属性可以相应的返回true或者false.

笑起来贼好看

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【javascript】如何在表格中进行全选、反选操作.

其中需要注意的是。用CSS3的奇偶选择器 nth-child(odd) 下面是JS代码：$(function(){ $("#selectAll").bind("click",function(){ if($(this).prop("checked")){ $("input[type='checkbox']").not(this).prop("checked",true);
复制链接

扫一扫