jquery怎么选中jquery全选checkboxx

来源：蜘蛛抓取(WebSpider) 时间：2016-04-15 04:58 标签： jquery选中的checkbox
jQuery操作CheckBox的方法介绍(选中,取消,取值)
代码如下:&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&&& &HTML&&& &&HEAD&&& & &TITLE& New document．&/TITLE&&& & &meta http-equiv="Content-Type" content="text/ charset=UTF-8" /&&& &&& &SCRIPT LANGUAGE="javascript" src="/demo/jquery.js"&&/script&&& & &SCRIPT LANGUAGE="javascript"&&& & &!--&& && $("document．).ready(function(){&& &&& $("#btn1").click(function(){&& &&& $("[name='checkbox']").attr("checked",'true');//全选&& &&& })&& &&&&&& $("#btn2").click(function(){&& &&& $("[name='checkbox']").removeAttr("checked");//取消全选&& &&& })&& &&& $("#btn3").click(function(){&& &&& $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数&& &&& })&& &&& $("#btn4").click(function(){&& &&& $("[name='checkbox']").each(function(){&& &&&&& &&&& if($(this).attr("checked"))&& && {&& &&& $(this).removeAttr("checked");&& && }&& && else& && {&& &&& $(this).attr("checked",'true');&& && }&& &&& })&& &&& })&& &&&& $("#btn5").click(function(){&& &&& var str="";&& &&& $("[name='checkbox'][checked]").each(function(){&& &&&& str+=$(this).val()+""r"n";&& && //alert($(this).val());&& &&& })&& && alert(str);&& &&& })&& && })&& & //--&&& & &/SCRIPT&&& &&/HEAD&&& &&BODY&&& &&form name="form1" method="post" action=""&&& && &input type="button" id="btn1" value="全选"&&& && &input type="button" id="btn2" value="取消全选"&&& && &input type="button" id="btn3" value="选中所有奇数"&&& && &input type="button" id="btn4" value="反选"&&& && &input type="button" id="btn5" value="获得选中的所有值"&&& && &br&&& && &input type="checkbox" name="checkbox" value="checkbox1"&&& && checkbox1&& && &input type="checkbox" name="checkbox" value="checkbox2"&&& && checkbox2&& && &input type="checkbox" name="checkbox" value="checkbox3"&&& && checkbox3&& && &input type="checkbox" name="checkbox" value="checkbox4"&&& && checkbox4&& && &input type="checkbox" name="checkbox" value="checkbox5"&&& && checkbox5&& && &input type="checkbox" name="checkbox" value="checkbox6"&&& && checkbox6&& && &input type="checkbox" name="checkbox" value="checkbox7"&&& && checkbox7&& && &input type="checkbox" name="checkbox" value="checkbox8"&&& &checkbox8&& &&/form&&&
顶一下(0) 踩一下(0)
热门标签：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&jQuery中获取checkbox选中项等操作及注意事项
字体：[ ] 类型：转载 时间：
今天在做一个项目功能时需要显示checkbox选项来让用户进行选择，由于前端不是很熟练，所以做了一个简单的Demo，其中遇到一些小问题，特记录下来，希望能帮到遇到类似问题的同学们
1. 获取checkbox的选中项 2. checkbox选项的全选 反选操作 用于测试的checkbox代码段：
代码如下:&div&&&&&&&&&&&& &input type="checkbox" name="abc" value="一年级" id="in1" checked="checked" /&&label for="in1"&一年级&/label&&&&&&&&&&&& &input type="checkbox" name="abc" value="二年级" id="in2" /&&label for="in2"&二年级&/label&&&&&&&&&&&& &input type="checkbox" name="abc" value="三年级" id="in3" /&&label for="in3"&三年级&/label&&&&&&&&&&&& &input type="checkbox" name="abc" value="四年级" id="in4" /&&label for="in4"&四年级&/label&&&&&&&&&&&& &input type="checkbox" name="abc" value="五年级" id="in5" /&&label for="in5"&五年级&/label&&&&&&&&&&&& &input type="checkbox" name="abc" value="六年级" id="in6" /&&label for="in6"&六年级&/label&&&&&&&&&&&& &input type="checkbox" name="abc" value="七年级" id="in7" /&&label for="in7"&七年级&/label&&&&&&&&&&&& &input type="checkbox" name="abc" value="八年级" id="in8" /&&label for="in8"&八年级&/label&&&&&&&& &/div&
一：首先来说第一点，获取checkbox的选中项。网上搜到的大部分方法使用each来获取：
代码如下:$("input[name='checkbox'][checked]").each(function () {&&& alert(this.value);})但在测试时我就遇到了问题，这种方法在IE下可以获取，但在firefox和chrome浏览器下就无法获取当前的选中项，测试效果如下： IE下的测试效果（我的是IE10）:
IE10下的效果：
chrome浏览器下的效果：
通过在google上搜索，找到了原因：
因为我用的jquery版本是1.7.2的，所以这里我得用 :checked 来获取才行，修改后的代码：
代码如下://获取选中项&&&&&&&&&&& $('#huoqu2').click(function () {&&&&&&&&&&&&&&& $('#show').html("");&&&&&&&&&&&&&&& $("input[name='abc']:checked").each(function () {&&&&&&&&&&&&&&&&&&& //alert(this.value);&&&&&&&&&&&&&&&&&&& $('#show').append(this.value + "& ");&&&&&&&&&&&&&&& });&&&&&&&&&&& });
在chrome下的效果：
二：checkbox的全选 反选操作：
由于这两个比较简单，我就直接上代码吧：
代码如下://全选/取消全选&&&&&&&&&&& $('#quanxuan').toggle(function () {&&&&&&&&&&&&&&& $("input[name='abc']").attr("checked", 'true');&&&&&&&&&&& }, function () {&&&&&&&&&&&&&&& $("input[name='abc']").removeAttr("checked");&&&&&&&&&&& });
&&&&&&&&&&& //反选&&&&&&&&&&& $('#fanxuan').click(function () {&&&&&&&&&&&&&&& $("input[name='abc']").each(function () {&&&&&&&&&&&&&&&&&&& if ($(this).attr("checked")) {&&&&&&&&&&&&&&&&&&&&&&& $(this).removeAttr("checked");&&&&&&&&&&&&&&&&&&& } else {&&&&&&&&&&&&&&&&&&&&&&& $(this).attr("checked", 'true');&&&&&&&&&&&&&&&&&&& }&&&&&&&&&&&&&&& });&&&&&&&&&&& });
再总结一下：
jquery版本在1.3之前时，获取checkbox的选中项的操作：
代码如下:&&&&&&&&&&&&&&& $("input[name='abc'][checked]").each(function () {&&&&&&&&&&&&&&&&&&& alert(this.value);&&&&&&&&&&&&&&& });
jquery版本在1.3之后时，获取checkbox的选中项的操作：
代码如下:&&&&&&&&&&&&&&& $("input[name='abc']:checked").each(function () {&&&&&&&&&&&&&&&&&&& alert(this.value);&&&&&&&&&&&&&&& });&
附 完整测试Demo代码：
代码如下:&html xmlns="http://www.w3.org/1999/xhtml"&&head runat="server"&&&& &meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&&& &title&&/title&&&& &script src="js/jquery-1.7.2.min.js"&&/script&
&&& &script&&&&&&&& $(function () {&&&&&&&&&&& //获取选中项(FF和chrome下无效)&&&&&&&&&&& $('#huoqu').click(function () {
&&&&&&&&&&&&&&& //$("input[name='abc'][checked]").each(function () {&&&&&&&&&&&&&&& //&&& alert(this.value);&&&&&&&&&&&&&&& //});
&&&&&&&&&&&&&&& $('#show').html("");&&&&&&&&&&&&&&& $("input[name='abc'][checked]").each(function () {&&&&&&&&&&&&&&&&&&& //alert(this.value);&&&&&&&&&&&&&&&&&&& $('#show').append(this.value + "& ");&&&&&&&&&&&&&&& });&&&&&&&&&&& });
&&&&&&&&&&& //获取选中项&&&&&&&&&&& $('#huoqu2').click(function () {&&&&&&&&&&&&&&& $('#show').html("");&&&&&&&&&&&&&&& $("input[name='abc']:checked").each(function () {&&&&&&&&&&&&&&&&&&& //alert(this.value);&&&&&&&&&&&&&&&&&&& $('#show').append(this.value + "& ");&&&&&&&&&&&&&&& });&&&&&&&&&&& });
&&&&&&&&&&& //全选/取消全选&&&&&&&&&&& $('#quanxuan').toggle(function () {&&&&&&&&&&&&&&& $("input[name='abc']").attr("checked", 'true');&&&&&&&&&&& }, function () {&&&&&&&&&&&&&&& $("input[name='abc']").removeAttr("checked");&&&&&&&&&&& });
&&&&&&&&&&& //反选&&&&&&&&&&& $('#fanxuan').click(function () {&&&&&&&&&&&&&&& $("input[name='abc']").each(function () {&&&&&&&&&&&&&&&&&&& if ($(this).attr("checked")) {&&&&&&&&&&&&&&&&&&&&&&& $(this).removeAttr("checked");&&&&&&&&&&&&&&&&&&& } else {&&&&&&&&&&&&&&&&&&&&&&& $(this).attr("checked", 'true');&&&&&&&&&&&&&&&&&&& }&&&&&&&&&&&&&&& });&&&&&&&&&&& });&&&&&&& });
&&& &/script&&/head&&body&&&& &form id="form1" runat="server"&&&&&&&& &div&&&&&&&&&&&& &input type="checkbox" name="abc" value="一年级" id="in1" checked="checked" /&&label for="in1"&一年级&/label&&&&&&&&&&&& &input type="checkbox" name="abc" value="二年级" id="in2" /&&label for="in2"&二年级&/label&&&&&&&&&&&& &input type="checkbox" name="abc" value="三年级" id="in3" /&&label for="in3"&三年级&/label&&&&&&&&&&&& &input type="checkbox" name="abc" value="四年级" id="in4" /&&label for="in4"&四年级&/label&&&&&&&&&&&& &input type="checkbox" name="abc" value="五年级" id="in5" /&&label for="in5"&五年级&/label&&&&&&&&&&&& &input type="checkbox" name="abc" value="六年级" id="in6" /&&label for="in6"&六年级&/label&&&&&&&&&&&& &input type="checkbox" name="abc" value="七年级" id="in7" /&&label for="in7"&七年级&/label&&&&&&&&&&&& &input type="checkbox" name="abc" value="八年级" id="in8" /&&label for="in8"&八年级&/label&&&&&&&& &/div&&&&&&&& &br /&&&&&&&& &input type="button" id="huoqu" value="获取选中项（FF和chrome下无效）" /&&&&&&&& &input type="button" id="quanxuan" value="全选/取消全选" /&&&&&&&& &input type="button" id="fanxuan" value="反选" /&&&&&&&& &input type="button" id="huoqu2" value="获取选中项" /&&&&&&& &br /&&&&&&&& 选中项： &div id="show"&
&&&&&&& &/div&&&& &/form&&/body&&/html&作者：酷小孩
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&

我要回帖

更多关于 jquery选中的checkbox 的文章

 

随机推荐