利用jquery做checkbox全选全不选的例子

最新推荐文章于 2018-07-03 19:27:34 发布
最新推荐文章于 2018-07-03 19:27:34 发布
阅读量2.4k 收藏
点赞数
分类专栏： JavaScript HTML + CSS Jquery 文章标签： jquery function class input border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/foart/article/details/6653278
版权
HTML + CSS 同时被 3 个专栏收录
24 篇文章 1 订阅
订阅专栏
JavaScript
23 篇文章 0 订阅
订阅专栏
Jquery
10 篇文章 0 订阅
订阅专栏

demo一：

 
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<%@ taglib uri="/WEB-INF/tlds/test.tld" prefix="pig"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
      <script type="text/javascript" src="<%=path %>/scripts/jquery.js"></script>
	<script type="text/javascript">
		function checkSubmit() {
		
			document.Search.submit();
		}

	
		function fnull(){
			var obj = document.getElementById("goPage");
		  	var index = obj.selectedIndex; // 选中索引
		  	var text = obj.options[index].text; // 选中文本
		  	var go = obj.options[index].value; // 选中值

			//alert(go);
	        gopage(go);
	 	}
	 	
	    function gopage(page){
	    	var numberpg=document.getElementById("numberpg").value;
	    	document.getElementById("prepage").value=numberpg;
	    	document.getElementById("currPage").value=page;
	    	checkSubmit();
	    } 
	      
	    function px(){
	    	var numberpg=document.getElementById("numberpg").value;
	    	gopage(1);
	    }
	    function driction(id){
			document.s_result_form1.s_result_form1_id.value = id;	
			document.s_result_form1.submit();
		}
		
		$(function(){
	
			$("td").css("height","22px");
	
			$("#refresh").bind("click",function(){
				//location.reload();
				location="wlan!querySurveyWlan.do";
			});
			
			$(".dg_alternatingitemstyle").bind("mouseover",function(){
				$(this).children().css("height","22px");	
			});
			
			$(".dg_alternatingitemstyle").bind("mouseout",function(){
				$(this).children().css("height","22px");	
			});
		});
	</script>
<style type="text/css">
<!--
.f {
	font-size: 12px;
}
-->
</style>
</head>
<body id="master">
	
    <div id="mainareacontent">
        <div class="mainarea">
            <div class="dataarea">				     
				<table width="100%" cellpadding="0" cellspacing="0" class="title">
                        <tr>
                            <th width="1268">
                              <span>WLAN调查管理</span>                            
                            </th>
                            <td width="26" class="null">
	                            <input type="image" name="import" src="<%=path %>/themes/default/btn_sc.gif" οnclick="deletes()" alt = "勾选批量删除"/>
                            </td>
                            <td width="16" class="null" align="center">
                            	<input type="image" name="export" src="<%=path %>/themes/default/btn_exp.gif" 
οnclick="window.location = 'wlan!hotExport.do'" alt = "导出"/>
                            </td>
                            <td width="16" class="null">
                            	<img id="refresh" src="<%=path %>/themes/default/btn_sx.gif" width="50" height="20" alt = "刷新"/>
                            </td>
                        </tr>
              	</table>
		<!----------- 数据列表 ------------------>
				<div class="datagrid">  
					<div class="search" style="margin-top:0px;"> 
			                <form action="wlan!querySurveyWlan.do" method="post" οnsubmit="return false;" 

name="Search" id="Search">
			                 <table cellpadding="0" cellspacing="0" width="97%">
			                    <tr>
			                    <td>记录日期：</td>
			                       <td><input type="text" name="msgDate" id="msgDate" value="${msgDate}"/></td>
			                    	<td>热点类型：</td>
			                       <td>
			                       	<s:select list="typeMap" name="msgType" value="msgType" theme="simple"/>
			                       	</td>			                      			                       
			                       <td>上网类型：</td>	
			                       <td>
			                       	<s:select list="areaMap" name="msgOnlineType" value="msgOnlineType" theme="simple"/>		                     
			                       </td>		                    
			                    </tr>
			                    <tr>
			                    	<td>手机号码：</td>
									<td>
										<input type="text" name="msgMobileno" id="msgMobileno" value="${msgMobileno}"/>
									</td>
			                    	<td>地址建议：</td>
			                       	<td>
			                       		<input type="text" name="msgAddress" id="msgAddress" value="${msgAddress}"/>
			                       	</td>  
			                       	<td style="text-align:left" colspan="2"><img style="width:50; height:20; 
border:0; cursor: pointer;" οnclick="checkSubmit()" src="<%=path %>/themes/default/btn_search.gif" /></td>	         
			                    </tr>			                    
			                  </table>
			                  <input type="hidden" name="prepage" id="prepage" value="${prepage}"/>
                    		  <input type="hidden" name="currPage" id="currPage" value="${currPage}"/>
			                  </form>
			  		</div>
			  		   
				    <table id="list" width="100%" cellpadding="0" cellspacing="0" class="dg_borderstyle" border="1" bordercolor="#1C568A">
		              <tr>
		               <th width="3%" style="background-color:#9FBFE3"><div align="center" title="全选/全不选"><input id="allSelect" name="allSelect" type="checkbox" οnclick="selectAll()" title="全选/全不选"/></div></th>		               
		               <th width="10%" style="background-color:#9FBFE3"><div align="center">记录日期</div></th>
		                <th width="10%" style="background-color:#9FBFE3"><div align="center">热点类型</div></th>
		               <th width="13%" style="background-color:#9FBFE3"><div align="center">上网类型</div></th>
		                <th width="12%" style="background-color:#9FBFE3"><div align="center">手机号码</div></th>
		                <th width="12%" style="background-color:#9FBFE3"><div align="center">地址建议</div></th>			                
		              </tr>
		              <s:iterator value="surveyList" id="dto" status="sta">
	                      <tr onMouseOver="MOver(this)" onMouseOut="Mout(this)" class="dg_alternatingitemstyle">	                       
	                        <td align="center" class="f">
	                        	<c:choose>
	                        		<c:when test="1==1">
	                        			<input id="ck" name="ck" type="checkbox" οnclick="cancelCKSelect()" disabled="disabled"/>
	                        		</c:when>
	                        		<c:otherwise>
	                        			<input id="ck" name="ck" type="checkbox" οnclick="cancelCKSelect()"/>
	                        		</c:otherwise>
	                        	</c:choose>	                        	
	                        	<input id="ckvalue${sta.count-1}" name="ckvalue${sta.count-1}" type="hidden" value="${dto.id}"/>
	                        </td>
	                         <td align="center" class="f">
	                        	${dto.recmakedate}
	                        </td>
	                        <td align="center" class="f">
	                        	${dto.type}
	                        </td>
	                        <td align="center" class="f">
	                        	${dto.onlinetype}
	                        </td>
	                        <td align="center" class="f">
	                        	${dto.mobileno}
	                        </td>
	                        <td align="center" class="f">
	                        	${dto.address}
	                        </td>                
	                      </tr>
                  	  </s:iterator>
		            </table>
		            <s:if test="surveyList.size>0">
		            <table width="98%" cellpadding="0" cellspacing="0" class="dg_pagestyle">
	                	<tr>
	                		<th>第${currPage}页 | 共${countPage}页/${countNum}条记录</th>
	                    	<td>每页  
		                        <select id="numberpg" name="numberpg" onChange="px(this.options

[this.selectedIndex].value)">
		                            <option <c:if test="${prepage==100}">selected="selected"</c:if> 

value="100">100</option>
		                            <option <c:if test="${prepage==300}">selected="selected"</c:if> 

value="300">300</option>
		                            <option <c:if test="${prepage==500}">selected="selected"</c:if> 

value="500">500</option>
		                        </select>
		                                                              条记录 | 第 
<select name="goPage" id="goPage">
	<s:iterator begin="1" end="countPage" status="stu">
		<c:choose>
			<c:when test="${stu.count==currPage}"><option value='${stu.count}' selected='selected'>${stu.count}</option></c:when>
			<c:otherwise>
				<option value="${stu.count}">${stu.count}</option>
			</c:otherwise>
		</c:choose>
	</s:iterator>
</select>
		                 <!-- <input type="text" style="width:25px;" id="goPage" value="${currPage}" οnkeydοwn="if(event.keyCode==13){fnull();return false;}" style="IME-MODE: disabled; WIDTH: 60px; HEIGHT: 15px" οnkeyup="this.value=this.value.replace(/\D/g,'')"  onafterpaste="this.value=this.value.replace(/\D/g,'')" />-->  页
					            <a onClick="fnull()" id="go" style="text-decoration:none;" >
					            <img border="0" src="<%=path %>/themes/default/btn_go.gif" />
					            </a>
					            <a  style="text-decoration:none;" onClick="gopage(1)">
					            <img border="0" src='<%=path %>/themes/default/btn_sy.gif'/>
					            </a>
					            <c:if test="${currPage!=1}">
					    		 <a  style="text-decoration:none;" onClick="gopage(${currPage-1})" >
					            <img border="0" src='<%=path %>/themes/default/btn_syy.gif'/>
					            </a>
					            </c:if>
					            <c:if test="${currPage!=countPage}">
					             <a style="text-decoration:none;" onClick="gopage(${currPage+1})">
					             <img border="0" src='<%=path %>/themes/default/btn_xyy.gif'/>
					             </a>
					            </c:if>
					            <a style="text-decoration:none;" onClick="gopage(${countPage})">
					            <img border="0" src='<%=path %>/themes/default/btn_wy.gif'/>
					            </a>	
		                    </td>			
		                </tr>
            		</table>
            		 </s:if>
		                <s:else>
		                	<center>当前查询没有数据！</center>
		                </s:else>
		             </div>
				</div>
        </div>
    </div>
</body>
</html>
<script>

$(function(){
	
});

function selectAll(){
	var ck = $("input[name=ck]");
	var currSelect = $("input[name=allSelect][checked]").val();
	
	$.each(ck,function(i){
		//alert(ck[i].disabled)
		if(!ck[i].disabled){
			ck[i].checked = currSelect;
		}
		
	});
}

function cancelCKSelect(){
	var ck = $("input[name=ck]");
	var r = true;
	$.each(ck,function(i){
		if(!ck[i].checked && !ck[i].disabled){
			r=false;
			return false;
		}
	});
	$('#allSelect').attr('checked', r); 
}

function deletes(){
	var delId ="";
	var ck = $("input[name=ck]");
	
	$.each(ck,function(i){
		if(ck[i].checked && !ck[i].disabled){
			delId += "'"+$("#ckvalue"+i).val()+"',";
		}	
	});
	delId = delId.substring(0,delId.lastIndexOf(","));
	if(delId != ""){
		var flag = window.confirm("您确定删除吗?");
		if(!flag){
			return;
		}
		window.location= "wlan!hotDelete.do?hotWlanId="+delId;
	}else{
		alert('请选择需要删除的数据！');
	}
}
</script>


demo二：

<script src="jquery-1.6.2.min.js"></script>


<input type="checkbox" id="ckAll" />check all<br />
<input type="checkbox" name="sub" />1<br />
<input type="checkbox" name="sub"/>2<br />
<input type="checkbox" name="sub"/>3<br />
<input type="checkbox" name="sub"/>4<br />


<script>

  $("#ckAll").click(function() {
    $("input[name='sub']").prop("checked", this.checked);
  });
  
  $("input[name='sub']").click(function() {
    var $subs = $("input[name='sub']");
    $("#ckAll").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false);
  });

</script>


 

cg_program
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现CheckBox全选、全不选功能
10-20
下面我们将详细讨论如何使用jQuery实现CheckBox全选和全不选的功能。 首先，我们需要在HTML页面中设置一个主Checkbox，通常标记为全选（CheckAll），以及一组子Checkbox，代表具体的选项。这些子Checkbox通常会有一...
基于JQuery实现CheckBox全选全不选
10-28
做项目时需要实现CheckBox的全选，我想用JQuery实现，从网上找了找，网上的确有很多例子，但都不能实现我想要的全部效果
jquery checkebox 全选 全不选 反选
Liaq325的专栏
11-11 915
/** * 点击按钮 * checkbox反选，全选，全不选 */ //全选 $("#id").click(function(){ $(":checkbox[name=xxx]").attr("checked",true); }); //全不选 $("#id").click(function(){ $(":checkedbox[name-xxx]").attr("checked",fal
使用jquery做复选框的全选,全不选
zhishiko的专栏
12-29 388
收到对方的所发生的
jquery全选、全不选、反选 效果
scenewood的博客
09-02 480
我在网上搜了很多的全选全不选效果，不过大多文章的思路大多很复杂，代码量也很多， 特意写了一个既能实现功能，代码和思路都很清晰的代码，这样小白也能看的懂 这个 是HTML5的新标签，当然你也可以这样写button按钮： html部分******************************************************** button id="btn
jquery全选，jquery全不选,jquery反选
hexytxl的专栏
08-26 6万+
全选，不全选，反选 $(function () { $("#selectAll").click(function () {//全选 $("#playList :checkbox"
jQuery checkBox 全选的例子
02-27 118
表单处理时经常会有全选的功能，但是这个功能往往会被忽视一个细节，就是逐个选中 checkBox 直至全选时，经常会忘记修改全选 checkBox 的状态，某知名互联网公司的网盘就会出现这样的问题，问题如图： 所以，需要给 checkBox 的点击事件做一下处理：点击时遍历一下除了全选的单选框之外的所有单选框，如果有未选中的，则全选不选中，如果全部都选中了，则修改全选框的状态，以下是...
jQuery ＞ 实现全选、全不选和反选
qq_33067925的博客
07-03 277
廖雪峰官网的jQuery例子, 实现全选、全不选和反选
jQuery实现简单全选、反选、全不选功能
何明洋的编程技术博客
07-03 1256
例子：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="ut
jquery 完成checkBox完成全选\全不选\反选的功能
cdc8596的博客
12-18 245
//本例子中要注意.prop和attr的区别: .prop:获取原生属性时使用 .attr:获取自己添加的属性使用                     $(function () {            // $('*').attr('banjimingcheng', '.netheuma3');             //全选             $(
jquery一键控制checkbox全选、反选或全不选
11-27
在jQuery中，对复选框（checkbox）进行全选、反选或全不选的操作是常见的需求，特别是在处理用户交互时。在这个例子中，我们看到一个利用jQuery实现的简单示例，通过三个独立的事件处理器来实现这些功能。以下是详细...
js与jQuery实现checkbox复选框全选/全不选的方法
10-23
在网页交互设计中，checkbox复选框全选/全不选功能是一个常见的需求，它能够帮助用户快速选择或取消选择一组选项。这篇文章主要探讨了如何使用JavaScript和jQuery这两种流行的前端技术来实现这一功能。 首先，我们...
jQuery实现checkbox三种情况的全选功能
既然选择了-何必在意的专栏
01-22 1445
本文章总结jQuery实现checkbox三种情况的全选功能 第一种：等值全选，也称name的等值全选，通过checkbox的名称name实现。 第二种：模糊全选，也称id模糊全选，通过checkbox的id或value值实现。 第三种：值范围全选，也称value值范围全选，通过checkbox的value值实现，或者截取id数字后缀范围判断实现。     等值全选
JS正则表达式验证身份证号码
热门推荐
foart的专栏
10-14 17万+
function isCardNo(card) { // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x
页面加载等待遮罩
foart的专栏
12-19 1万+
/** * 页面加载等待页面 */ var height = window.screen.height-180; var width = window.screen.width; var leftW = 300; if(width>1200){ leftW = 500; }else if(width>1000){
Js深度克隆对象（对象的属性含有对象数组）
foart的专栏
06-16 4149
这个方法当时在做项目时写的，应用在easyui的Tree组件中。 后台Java对象结构：List public class TreeObj { private String id; private String text; private List children = new ArrayList(); private String state ; private String ic
点击空白处隐藏div层
foart的专栏
04-10 3187
<br /><mce:script type="text/javascript"><!-- var id=0 function chk_broswer(){ if (navigator.appName.indexOf("Microsoft")!=-1) { return(true); } else{ return(false); } } function c(css) {ie
jquery checkbox全选全不选
最新发布
03-16
jQuery可以通过以下代码实现checkbox的全选和全不选功能： 全选： ```javascript $("#checkAll").click(function(){ $("input[type='checkbox']").prop("checked",true); }); ``` 其中，`#checkAll`是全选的复选...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值