jQuery获取checkbox选中项等操作及注意事项
2016-06-30 09:29
489 查看
转自:http://www.cnblogs.com/babycool/p/3302904.html
今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下来,希望能帮到遇到类似问题的同学们。
1. 获取checkbox的选中项
2. checkbox选项的全选 反选操作
用于测试的checkbox代码段:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
一:首先来说第一点,获取checkbox的选中项。网上搜到的大部分方法使用each来获取:
但在测试时我就遇到了问题,这种方法在IE下可以获取,但在firefox和chrome浏览器下就无法获取当前的选中项,测试效果如下:
IE下的测试效果(我的是IE10):
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/04/e239fd1cd60615ac34f97e135e7a9755.jpg)
IE10下的效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/04/3f961bd2356b8659deeef3cf4b24f2fa.jpg)
chrome浏览器下的效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/04/ab4742f46f9e12bf2f12cdd23604f2f3.jpg)
通过在google上搜索,找到了原因:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/04/6b0373a0f86af3dfafd2aebf77a5b5a8.jpg)
网址: Jquery 选中多少个input CheckBox问题,IE正常,FF和Chrome无法取到值
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/04/fa4c60d3453d9b93f3785d3f8a5ec41a.jpg)
因为我用的jquery版本是1.7.2的,所以这里我得用 :checked 来获取才行,修改后的代码:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
在chrome下的效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/04/42b5994040167751dbe45981582afea7.jpg)
二:checkbox的全选 反选操作:
由于这两个比较简单,我就直接上代码吧:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
再总结一下:
jquery版本在1.3之前时,获取checkbox的选中项的操作:
jquery版本在1.3之后时,获取checkbox的选中项的操作:
附 完整测试Demo代码:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下来,希望能帮到遇到类似问题的同学们。
1. 获取checkbox的选中项
2. checkbox选项的全选 反选操作
用于测试的checkbox代码段:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
<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>
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
一:首先来说第一点,获取checkbox的选中项。网上搜到的大部分方法使用each来获取:
$("input[name='checkbox'][checked]").each(function () { alert(this.value); })
但在测试时我就遇到了问题,这种方法在IE下可以获取,但在firefox和chrome浏览器下就无法获取当前的选中项,测试效果如下:
IE下的测试效果(我的是IE10):
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/04/e239fd1cd60615ac34f97e135e7a9755.jpg)
IE10下的效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/04/3f961bd2356b8659deeef3cf4b24f2fa.jpg)
chrome浏览器下的效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/04/ab4742f46f9e12bf2f12cdd23604f2f3.jpg)
通过在google上搜索,找到了原因:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/04/6b0373a0f86af3dfafd2aebf77a5b5a8.jpg)
网址: Jquery 选中多少个input CheckBox问题,IE正常,FF和Chrome无法取到值
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/04/fa4c60d3453d9b93f3785d3f8a5ec41a.jpg)
因为我用的jquery版本是1.7.2的,所以这里我得用 :checked 来获取才行,修改后的代码:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
//获取选中项 $('#huoqu2').click(function () { $('#show').html(""); $("input[name='abc']:checked").each(function () { //alert(this.value); $('#show').append(this.value + " "); }); });
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
在chrome下的效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/04/42b5994040167751dbe45981582afea7.jpg)
二:checkbox的全选 反选操作:
由于这两个比较简单,我就直接上代码吧:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
//全选/取消全选 $('#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'); } }); });
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
再总结一下:
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代码:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; 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>
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
相关文章推荐
- jQuery根据ID获取input、checkbox、radio、select的示例
- jquery实现的代替传统checkbox样式插件
- C#获取动态生成的CheckBox值
- Android控件之CheckBox、RadioButton用法实例分析
- ASP.NET中 CheckBox复选框控件的使用
- 在ASP.NET 2.0中操作数据之五十:为GridView控件添加Checkbox
- asp.net动态产生checkbox(数据源为DB或内存集合)
- asp.net gridview中用checkbox全选的几种实现的区别
- asp.net treeview checkbox 相关问题
- IE中checkbox在刷新后初始化的问题
- javascript中checkbox使用方法简单实例演示
- 浅谈checkbox的一些操作(实战经验)
- asp.C#实现图片文件与base64string编码解码
- javascript中checkbox使用方法实例演示
- 多个datatable共存造成多个表格的checkbox都被选中
- javascript使用shift+click实现选择和反选checkbox的方法
- JS选中checkbox后获取table内一行TD所有数据的方法
- 用Javascript读取CheckBox数组的值的代码(兼容IE与firefox)
- 基于javascript实现checkbox复选框实例代码
- JS实现CheckBox复选框全选、不选或全不选功能