[开发笔记]-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 选中多少个input CheckBox问题,IE正常,FF和Chrome无法取到值
因为我用的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/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>
[开发笔记]-jQuery获取checkbox选中项等操作及注意事项的更多相关文章
- jQuery获取checkbox选中项等操作及注意事项
jQuery获取checkbox选中项等操作及注意事项 今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下 ...
- jquery获取select选中项的文本
使用jquery获取选中的值很简单 $("#select").val(); 但是获取选中的文本就没有这么直接了 $("#select").find(" ...
- jQuery获取radio选中项的值【转藏】
<title></title> <script src="js/jquery-1.7.2.min.js"></script> < ...
- jquery获取select选中项 自定义属性的值
<select id="serialNo" > <option value=''1' data-id="001">第一次</opt ...
- jquery 获取checkbox 选中值并拼接字符集
1.代码示例: var chk_value =[]; $('input[name="rewardids"]:checked').each(function(){ chk_val ...
- Jquery怎么获取select选中项 自定义属性的值
Jquery如何获取select选中项 自定义属性的值?HTML code <select id="ddl" onchange="ddl_change(this)& ...
- JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery获取radio选中值及遍历
使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项:1.& ...
- Jquery 获取 radio选中值,select选中值
随着Jquery的作用越来越大,使用的朋友也越来越多.在Web中,由于CheckBox.Radiobutton .DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的操作 ...
随机推荐
- 转:如何学习SQL(第三部分:SQL数据类型与三值逻辑)
转自:http://blog.163.com/mig3719@126/blog/static/285720652010950921286/ 7. 数据类型 在数据库理论中,关系模型和数据类型这两部分内 ...
- 牛客网 --java问答题
http://www.nowcoder.com/ 主要是自己什么都不怎么会.在这里可以学习很多的! 第一天看题自己回答,第二天看牛客网的答案! 1 什么是Java虚拟机?为什么Java被称作是“平台无 ...
- 20160808_Linux服务
1. http://bbs.csdn.net/topics/370100269 2. http://blog.csdn.net/csfreebird/article/details/8239933 h ...
- 利用ITextSharp导出PDF文件
最近项目中需要到处PDF文件,最后上网搜索了一下,发现ITextSharp比较好用,所以做了一个例子: public string ExportPDF() { //ITextSharp Usage / ...
- jstree级联查找树
<script > obj=$.jstree.reference($('#plugins4')); function PP(obj,e,filename){ if (obj.get_par ...
- 在腾讯云上创建您的SQL Cluster(1)
版权声明:本文由李斯达原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/247 来源:腾云阁 https://www.qclo ...
- MariaDB 加密特性及使用方法
版权声明:本文由吴洪辉原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/193 来源:腾云阁 https://www.qclo ...
- 让页面滑动流畅得飞起的新特性:Passive Event Listeners
版权声明:本文由陈志兴原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/153 来源:腾云阁 https://www.qclo ...
- 在唯一密钥属性“name”设置为“ScriptHandlerFactory”时,无法添加类型为“add”的重复集合项
出错原因:同一根目录下有两个相同的WebConfig文件 解决办法:删除子其中一个webConfig文件. 详细:
- 前端面试题之nina分享
HTML相关 1.<!DOCTYPE>标签的定义与用法. <!DOCTYPE>的定义: <!DOCTYPE>声明位于文档中的最前面的位置,处于<html> ...