获取checkbox 的选中状态的id、checkbox的一些操作
var id_array=new Array();
$('input[name="id"]:checked').each(function(){
id_array.push($(this).attr('id'));//向数组中添加元素
});
var idstr=id_array.join(',');//将数组元素连接起来以构建一个字符串
alert(idstr);
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"))
if (true == $(this).attr("checked")) {
alert( $(this).attr('value') );
}
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" />
获取checkbox 的选中状态的id、checkbox的一些操作的更多相关文章
- jQuery判断复选框checkbox的选中状态
通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...
- 获取select标签选中状态 的label的值。
<select name="procode" onchange="alert(this.options[this.selectedIndex].text)" ...
- html5中checkbox的选中状态的设置与获取
获取checkbox是否选中: $("#checkbox").is(":checked"); 获得的值为true或false. 设置checkbox是否选中: ...
- ASP.NET 中关GridView里加入CheckBox 在后台获取不到选中状态的问题
<!-- 在GridView里添加CheckBox选择控件 !--> <ItemTemplate> <asp:CheckBox ID="CheckBox&quo ...
- CheckBox 半选中状态
<input type='checkbox' />可以半选中,这个特性,很多浏览器都支持,包括Firefox,Chrome和IE 用 input.indeterminate 这个属性来获取 ...
- android checkbox 未选中状态 已选中状态 替换成自己的图片
效果图: 未选中状态: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
- checkBox半选中状态
checkbox 可以半选中,这个特性,很多浏览器都支持 // 用 input.indeterminate 这个属性来获取或者设置半选中状态,必须要用 js 添加属性,才有效果. input.inde ...
- angularJS处理table中checkbox的选中状态
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQ无法设置checkbox变成选中状态
设置以后checkbox并没有变成选中状态,用chrome调试看了一下,checkbox中确实有checked属性,针对这个问题,大家可以参考下本文 代码如下: $("input" ...
随机推荐
- css渐变/背景
1.线性渐变(gradient变化) linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果. 上图是从黄色渐变到绿色 background:linear-gradient( to ...
- HTML及CSS常用颜色英文词汇
黑色 银色 灰色 白色 茶色 红色 紫色 紫红 black silver gray white maroon red purple fuchsia #000000 #C0C0C0 #808080 #F ...
- Inno setup complier将文件添加注册表
[Registry] Root: HKCR; Subkey:.; ValueType: string; ValueName: ; ValueData:"264file" Root: ...
- C# 几种退出程序的方式
C# WinForm程序退出的方法 1.this.Close(); 只是关闭当前窗口,若不是主窗体的话,是无法退出程序的,另外若有托管线程(非主线程),也无法干净地退出: 2.Application. ...
- week 与 strong区别 精辟的解释
转:http://stackoverflow.com/questions/9262535/explanation-of-strong-and-weak-storage-in-ios5 觉得讲的很容易理 ...
- jupyter巨好玩-常用设置
整理一下有用的设置: 自定义ipython工作目录 用jupyter notebook默认打开的页面时,默认在的是home路径,会看见一大堆东西,假如我们只想展示jupyter的工程目录咋办? 简单说 ...
- skynet的流程2
http://blog.csdn.net/xiarendeniao/article/details/38613161 http://www.jiandan.ren/2015/06/skynet-hel ...
- JQuery DataTables Editor---只修改页面内容
近来在工作中需要对JQuery DataTables进行增,删,改的操作,在网上找了一些资料,感觉比较的好的就是(http://editor.datatables.net/)文章中所展示的操作方法(如 ...
- html5介绍
html5与html4的区别 (h5 and h4) 什么是OPOA 1, 浏览器对h5的支持情况 2, 历史 --- h5 2004年,whatwg 提出 w ...
- J2SE知识点摘记(一)
1. 数组的声明时无法指定数组的长度. 2. 一维数组的声明和内存的分配 "数据类型 数组名[]; //声明一维数组 数组名= new 数据类型[ ...