input 全选/不全选代码,JS代码库,德仔网

代码语言

代码分类

【JS】 input 全选/不全选

作者:纪广财 / 发布于2015/11/12/ 623


	<!DOCTYPE html>
	<html lang="en">
	<head>
	 <meta charset="UTF-8">
	 <title>input</title>
	 <script src="js/jquery-1.11.1.js"></script>
	 <script>
	 $(function(){
	 $('#selectAll').click(function(){
	 if($('#selectAll').is(':checked')){
	 $('tbody').find('input').prop('checked',true);
	 }else{
	 $('tbody').find('input').prop('checked',false);
	 }
	
	 })
	 $('tbody input').click(function(){
	 var i=0;
	 var arr=$('tbody').find('input').length;
	 $('tbody input').each(function(){
	 if($(this).is(':checked')){
	 i++;
	 };
	 })
	 if(i==arr){
	 $('thead').find('input').prop('checked',true);
	 }else{
	 $('thead').find('input').prop('checked',false);
	 }
	 })
	
	 })
	 </script>
	</head>
	<body>
	<table style="width:50%;border:1px solid grey;text-align:center;">
	 <thead>
	 <tr>
	 <td><input type="checkbox" id="selectAll">全选<td>
	 <td>内容</td>
	 </tr>
	 </thead>
	 <tbody>
	 <tr>
	 <td><input type="checkbox"></td>
	 <td>11</td>
	 </tr>
	 <tr>
	 <td><input type="checkbox"></td>
	 <td>22</td>
	 </tr>
	 <tr>
	 <td><input type="checkbox"></td>
	 <td>33</td>
	 </tr>
	 <tr>
	 <td></td>
	 <td></td>
	 </tr>
	 </tbody>
	</table>
	</body>
	</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　input　　全选/不全选　

同语言下

可能有用的

纪广财贡献的其它代码(6)