JQuery对CheckBox的一些相关操作
一、通过选择器选取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"
/>
分享到:
相关推荐
jQuery 对checkbox的操作
自动动手写了个操作checkbox,里面包括全选、全不选、反选、获取选中值四个功能...
JQuery对checkbox的操作 (01).zip欢迎下载!
JQuery操作checkbox、radio等示例
jquery动态生成checkbox 设置一行最多显示几个checkbox 获取checkbox选中项
博文链接:https://qsfwy.iteye.com/blog/236001
下面是Jquery对checkbox的一些操作,全选,反选,取消全选等等.
JQuery对checkbox的多选,全选,反选操作样例
NULL 博文链接:https://yhjhoo.iteye.com/blog/652050
C#.net下通jQuery实现的由CheckBox来控件CheckBoxList的全选操作,通过CheckBox来全选CheckBoxList,当有一个CheckBoxList选中时,CheckBox则被选中,且并且可以取得选中的CheckBox和CheckBoxList的value和text
jquery、js操作checkbox全选反选.docx
本文实例讲述了jQuery实现checkbox全选的方法。分享给大家供大家参考。具体分析如下: 通过checkbox 进行全选和取消全选的操作,如果通过toggle进行处理,则会出现checkbox无法显示对勾的问题。 使用click事件,根据...
今天上午对checkbox相关事件整合了下,运用jquery相关知识,整理table中隔行换色,选中变色,全选,反选等操作,并且对table动态添加行进行了相关整理。
jquery操作Radio、Checkbox、Select详细Demo
主要介绍了jQuery实现checkbox全选功能,结合完整实例形式分析了jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
主要介绍了jquery操作checkbox实现全选和取消全选,需要的朋友可以参考下
本文实例讲述了jquery操作checkbox的常用方法。分享给大家供大家参考,具体如下: 做系统的过程中,与checkbox 复选框打交道,是难免的,而且在每个系统中,简直是必不可少的一道菜,通常的操作有一下几种: 1.用...
主要介绍了jQuery对checkbox 复选框的全选全不选反选的操作 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
主要介绍了jQuery实现checkbox全选、反选及删除等操作的方法,结合实例形式形式详细分析了jQuery针对checkbox多选按钮常见批量操作相关实现技巧,需要的朋友可以参考下