JQuery对CheckBox的一些相关操作
2016-04-19 11:02
417 查看
一、通过选择器选取CheckBox: 1.给CheckBox设置一个id属性,通过id选择器选取: <input type="checkbox" name="myBox" id="chkOne" value="1" checked="checked" /> JQuery: $("#chkOne").click(function(){}); 2.给CheckBox设置一个class属性,通过类选择器选取: <input type="checkbox" name="myBox" class="chkTwo" value="1" checked="checked" /> JQuery: $(".chkTwo").click(function(){}); 3.通过标签选择器和属性选择器来选取: <input type="checkbox" name="someBox" value="1" checked="checked" /> <input type="checkbox" name="someBox" value="2" /> JQuery: $("input[name='someBox']").click(function(){}); 二、对CheckBox的操作: 以这段checkBox代码为例: <input type="checkbox" name="box" value="0" checked="checked" /> <input type="checkbox" name="box" value="1" /> <input type="checkbox" name="box" value="2" /> <input type="checkbox" name="box" value="3" /> 1.遍历checkbox用each()方法: $("input[name='box']").each(function(){}); 2.设置checkbox被选中用attr();方法: $("input[name='box']").attr("checked","checked"); 在HTML中,如果一个复选框被选中,对应的标记为 checked="checked"。 但如果用jquery alert($("#id").attr("checked")) 则会提示您是"true"而不是"checked",所以判断 if("checked"==$("#id").attr("checked")) 是错误的,应该是 if(true == $("#id").attr("checked")) 3.获取被选中的checkbox的值: $("input[name='box'][checked]").each(function(){ if (true == $(this).attr("checked")) { alert( $(this).attr('value') ); } 或者: $("input[name='box']:checked").each(function(){ if (true == $(this).attr("checked")) { alert( $(this).attr('value') ); } $("input[name='box']:checked")与 $("input[name='box']")有何区别没试过,我试了用 $("input[name='box']")能成功。 4.获取未选中的checkbox的值: $("input[name='box']").each(function(){ if ($(this).attr('checked') ==false) { alert($(this).val()); } }); 5.设置checkbox的value属性的值: $(this).attr("value",值); 三、 一般都是创建一个js数组来存储遍历checkbox得到的值,创建js数组的方法: 1. var array= new Array(); 2. 往数组添加数据: array.push($(this).val()); 3.数组以“,”分隔输出: alert(array.join(',')); <input type="checkbox" name="myBox" class="chkTwo" value="2" /> <input type="checkbox" name="myBox" id="chkOne" value="2" />
附:
评论
2 楼 harchiko 2014-09-24
bigcan 写道
百度搜索到jquery Checkbox条记录就是这个连接,但实际上这个对checkbox是否被选中的说明是过时的,必须使用下面的方式:
$('#CheckBox').is(':checked')
感谢~我也是搜索到这个,但看到您的评论才搞好的。
1 楼 bigcan 2014-09-23
百度搜索到jquery Checkbox条记录就是这个连接,但实际上这个对checkbox是否被选中的说明是过时的,必须使用下面的方式:
$('#CheckBox').is(':checked')
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码