全选和全不选

最新推荐文章于 2024-03-31 01:52:36 发布

c_0826

最新推荐文章于 2024-03-31 01:52:36 发布

阅读量570

点赞数

分类专栏： JS 新知识文章标签：全选全部选单选框多选框

本文链接：https://blog.csdn.net/c_0826/article/details/36049919

版权

新知识同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

点击每一行的时候，就会选中第一列的单选框按钮，点击全选就全部选中，如果全部选中了，全选按钮也自动选中

代码如下：

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<base href="<%=basePath%>">
	<title></title>
	
	<script src="js/jquery-1.9.1.min.js" type="text/javascript" ></script>
 <title>全选</title>
    <script language="javascript" type="text/javascript">
    $(function(){
    	checkBox("items","selectAll","a");
    });
    
    //checkBoxName的name名称,checkboxId全选框Id
    function checkBox(checkBoxName,checkboxId,trClass){
    	//获取多选框的对象
    	var checkbox = $(':checkbox[name='+checkBoxName+']');
    	//获取行对象
    	 var row = $('.'+trClass+'');
    	/**点击全选或全部不选**/
    	$('#'+checkboxId+'').click(function(){
    		checkbox.add($('#'+checkboxId+'')).prop('checked', this.checked);
	    });
    	
    	/**选框的点击事件**/
    	checkbox.click(function(e){
 	    //阻止冒泡,避免行点击事件中,直接选择选框无效
 	     e.stopPropagation();
     	//判断选中个数与实际个数是否相同,以确定全选/全不选状态
 	     $('#'+checkboxId+'').prop('checked', checkbox.size() == checkbox.filter(':checked').size());
 	    });
    	
    	  row.bind({
  			//点选
  	        click: function(){
  				//行内点击时,行内的选框状态为原状态取反
  	            $(this).find(':checkbox').prop('checked', !$(this).find(':checkbox').get(0).checked)
  	          $('#'+checkboxId+'').prop('checked', checkbox.size() == checkbox.filter(':checked').size());
  	        }
  	    });
    }
    </script>
    <style>


</style>
</head>
<body>
<form action="" id="form1">
<div id="demo">
  <table  id="tables">
       <tr class="a"> <td><input type="checkbox" value="歌曲1" name="items"/>歌曲1</td><td>dafdfdfdsss</td></tr>
       <tr class="a"> <td><input type="checkbox" value="歌曲1" name="items"/>歌曲2</td><td>dfadfadsss</td></tr>
       <tr class="a"> <td><input type="checkbox" value="歌曲2" name="items"/>歌曲3</td><td>sadfadfadfss</td></tr>
    </table>
    <input name="name" value="zfc">
    <input type="checkbox" value="全选" id="selectAll" />all
    </div>
    <input type="button" οnclick="save()">
    </form>
</body>
</html>