Jquery实现checkbox的全选,全不选,反选,提交

来源：互联网发布：淘宝买的平板刷机编辑：程序博客网时间：2024/05/24 07:16

参考链接:http://www.cnblogs.com/libingql/archive/2011/11/07/2238663.html

Jquery实现checkbox的全选,全不选,反选,提交;

<span style="font-size:14px;">// 原文代码<!DOCTYPE html><html><head><meta charset="utf-8"><title>checkbox list选择</title><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript">$(function() {// 全选$("#btnCheckAll").bind('click', function() {$("[name=chkItem]:checkbox").attr("checked", true);});// 全不选$("#btnCheckNone").bind('click', function() {$("[name=chkItem]:checkbox").attr("checked", false);});// 反选$("#btnCheckReverse").bind('click', function() {$("[name=chkItem]:checkbox").each(function() {$(this).attr("checked", !$(this).attr("checked"));});});// 提交$("#btnSubmit").bind('click', function() {var result = new Array();$("[name:chkItem]:checkbox").each(function() {if ($(this).is(":checked")) {result.push($(this).attr("value"));}});alert(result.join(","));});});</script></head><body><div><input name="chkItem" type="checkbox" value="今日话题" />今日话题<input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点<input name="chkItem" type="checkbox" value="财经" />财经<input name="chkItem" type="checkbox" value="汽车" />汽车<input name="chkItem" type="checkbox" value="科技" />科技<input name="chkItem" type="checkbox" value="房产" />房产<input name="chkItem" type="checkbox" value="旅游" />旅游</div><div><input id="btnCheckAll" type="button" value="全选" /><input id="btnCheckNone" type="button" value="全不选" /><input id="btnCheckReverse" type="button" value="反选" /><input id="btnSubmit" type="button" value="提交" /></div></body></html></span>

jquery从table从获取type="checkbox"的input,过滤后,将选中的checkbox选项提交;

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript">$(function() {// chkAll全选事件$("#chkAll").bind("click", function() {$("[name = chkItem]:checkbox").attr("checked", this.checked);});// chkItem事件$("[name = chkItem]:checkbox").bind("click", function() {var $chk = $("[name = chkItem]:checkbox");$("#chkAll").attr("checked", $chk.length == $chk.filter(":checked").length);})// 提交$("#btnSubmit").bind('click', function() {var result = new Array();$("[name:chkItem]:checkbox").each(function() {if ($(this).is(":checked")) {result.push($(this).attr("value"));}});alert(result.join(","));});// 重置$("#btnReset").bind('click', function() {$("[name=chkItem]:checkbox").attr("checked", false);});});</script><style type="text/css">table {border-collapse: collapse;}td {border: 1px solid #ccc;}</style></head><body><table id="tb"><thead><tr><td><input id="chkAll" type="checkbox" /></td><td>分类名称</td></tr></thead><tbody><tr><td><input name="chkItem" type="checkbox" value="今日话题" /></td><td>今日话题</td></tr><tr><td><input name="chkItem" type="checkbox" value="视觉焦点" /></td><td>视觉焦点</td></tr><tr><td><input name="chkItem" type="checkbox" value="财经" /></td><td>财经</td></tr><tr><td><input name="chkItem" type="checkbox" value="汽车" /></td><td>汽车</td></tr><tr><td><input name="chkItem" type="checkbox" value="科技" /></td><td>科技</td></tr><tr><td><input name="chkItem" type="checkbox" value="房产" /></td><td>房产</td></tr><tr><td><input name="chkItem" type="checkbox" value="旅游" /></td><td>旅游</td></tr><tr><td colspan="2" align="center"><input name="" value="提交" type="button" id="btnSubmit" style="width: 100%;"/></td></tr></tbody></table></body></html>

应用小demo-获取选中checkbox选项后,jquery ajax向后台发送请求

$(function() {// 提交时,把选中的URL集合传给privilegeForm$("#btnSubmit").bind('click', function() {var result = new Array();$("[name:url]:checkbox").each(function() {if ($(this).is(":checked")) {result.push($(this).attr("value"));}});alert(result.join(","));var params = {uid:$("#uid").val(),urls:result};alert(params);$.ajax({url:"addPrivilege.do",data:params,type:'post',dataType:'json',success:function(){alert("权限管理操作完成!");},error:function(){alert("操作失败!返回权限管理页面!");}});});});

0 0