JQuery中_Radio、DropDownList、Checkbox选择控件的处理
Radio
1.获取选中值,三种方法都可以:
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
2.设置第一个Radio为选中值:
$('input:radio:first').attr('checked', 'checked'); 或者
$('input:radio:first').attr('checked', 'true'); 注: attr("checked",'checked')= attr("checked", 'true')= attr("checked", true)
3.设置最后一个Radio为选中值: $('input:radio:last').attr('checked', 'checked');
或者 $('input:radio:last').attr('checked', 'true');
4.根据索引值设置任意一个radio为选中值:
$('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2.... 或者 $('input:radio').slice(1,2).attr('checked', 'true');
5.根据Value值设置Radio为选中值
$("input:radio[value='rd2']").attr('checked','true'); 或者
$("input[value='rd2']").attr('checked','true');
6.删除Value值为rd2的Radio
$("input:radio[value='rd2']").remove();
7.删除第几个Radio
$("input:radio").eq(索引值).remove();索引值=0,1,2....
如删除第3个Radio:$("input:radio").eq(2).remove();
8.遍历Radio
$('input:radio').each(function(index,domEle){ //写入代码 });
DropDownList
1. 获取选中项: 获取选中项的Value值: $('select#sel option:selected').val(); 或者
$('select#sel').find('option:selected').val(); 获取选中项的Text值:
$('select#seloption:selected').text(); 或者
$('select#sel').find('option:selected').text();
2. 获取当前选中项的索引值:
$('select#sel').get(0).selectedIndex;
3. 获取当前option的最大索引值:
$('select#sel option:last').attr("index")
4. 获取DropdownList的长度:
$('select#sel')[0].options.length; 或者
$('select#sel').get(0).options.length;
5. 设置第一个option为选中值:
$('select#sel option:first').attr('selected','true') 或者
$('select#sel')[0].selectedIndex = 0;
6. 设置最后一个option为选中值:
$('select#sel option:last).attr('selected','true')
7. 根据索引值设置任意一个option为选中值: $('select#sel')[0].selectedIndex =索引值;索引值=0,1,2....
8. 设置Value=4 的option为选中值: $('select#sel').attr('value','4'); 或者
$("select#sel option[value='4']").attr('selected', 'true');
9. 删除Value=3的option: $("select#sel option[value='3']").remove();
10.删除第几个option: $(" select#sel option ").eq(索引值).remove();索引值=0,1,2....
如删除第3个Radio: $(" select#sel option ").eq(2).remove();
11.删除第一个option: $(" select#sel option ").eq(0).remove(); 或者
$("select#sel option:first").remove();
12. 删除最后一个option:
$("select#sel option:last").remove();
13. 删除dropdownlist:
$("select#sel").remove();
14.在select后面添加一个option:
$("select#sel").append("<option value='6'>f</option>");
15. 在select前面添加一个option: $("select#sel").prepend("<option value='0'>0</option>");
16. 遍历option: $(' select#sel option ').each(function (index, domEle) { //写入代码 }); CheckBox
1. 获取单个checkbox选中项(三种写法):
$("input:checkbox:checked").val() 或者
$("input:[type='checkbox']:checked").val(); 或者
$("input:[name='ck']:checked").val();
2. 获取多个checkbox选中项:
$('input:checkbox').each(function() { if ($(this).attr('checked') ==true) { alert($(this).val()); } });
3. 设置第一个checkbox 为选中值:
$('input:checkbox:first').attr("checked",'checked'); 或者
$('input:checkbox').eq(0).attr("checked",'true');
4. 设置最后一个checkbox为选中值:
$('input:radio:last').attr('checked', 'checked'); 或者
$('input:radio:last').attr('checked', 'true');
5. 根据索引值设置任意一个checkbox为选中值: $('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2.... 或者 $('input:radio').slice(1,2).attr('checked', 'true');
6. 选中多个checkbox: 同时选中第1个和第2个的checkbox:
$('input:radio').slice(0,2).attr('checked','true');
7. 根据Value值设置checkbox为选中值:
$("input:checkbox[value='1']").attr('checked','true');
8. 删除Value=1的checkbox: $("input:checkbox[value='1']").remove();
9. 删除第几个checkbox: $("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox: $("input:checkbox").eq(2).remove();
10.遍历checkbox:
$('input:checkbox').each(function (index, domEle) { //写入代码 });
11.全部选中 $('input:checkbox').each(function() {
$(this).attr('checked', true); });
12.全部取消选择:
$('input:checkbox').each(function () { $(this).attr('checked',false); });
===========================以下代码和上面大多是重复的=============================
jQuery获取Select选择的Text和Value:
语法解释:
1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发
2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
3. var checkValue=$("#select_id").val(); //获取Select选择的Value
4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值
jQuery设置Select选择的Text和Value:
语法解释:
1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中
2. $("#select_id ").val(4); //设置Select的Value值为4的项选中
3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中
jQuery添加/删除Select的Option项:
语法解释:
1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
6. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关
获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本 var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
$("#select_id'").attr("value", '12'); //设置value=12的项目为当前选中项
$("select#select_id option:last").attr('selected', true); //设置下拉列表中的最后一个值为当前选中
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;
获取值:
文本框,文本区域:$("#txt").attr("value");
多选框checkbox:$("#checkbox_id").attr("value");
单选组radio: $("input[@type=radio][@checked]").val();
下拉框select: $('#sel').val();
控制表单元素:
文本框,文本区域:$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容
多选框checkbox: $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组radio: $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框
-------------------------------------------------------------------
//遍历option和添加、移除 option function changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){
$("select[@name=ISHIPTYPE] option").each(function(){ if($(this).val() == 111){ $(this).remove(); } });
}else{
$("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]"));
}
}
//取得下拉選單的選取值
$(#testSelect option:selected').text();
或$("#testSelect").find('option:selected').text();
或$("#testSelect").val();
JQuery中_Radio、DropDownList、Checkbox选择控件的处理的更多相关文章
- jquery mobiscroll移动端日期选择控件(无乱码)
jquery mobiscroll移动端日期选择控件(无乱码) <pre><!DOCTYPE html><html lang="en">< ...
- JQuery好用的日期选择控件 DatePicker
近期发现一个很好的基于JQ的前端UI日期选择控件Jquery.DatePicker.js 下载地址:jquery.DatePIcker.js 演示地址:DatePicker - 基于jQuery 1. ...
- asp.net中的时间日期选择控件
asp.net中的时间日期选择控件 Posted on 2008-07-17 17:37 飛雪飄寒 阅读(22922) 评论(6) 编辑 收藏 在系统中经常需要进行时间日期选择(比如查询时间范 ...
- thinter中combobox下拉选择控件(九)
combobox控件,下拉菜单控件 combobox控件在tkinter中的ttk下 简单的实现下: import tkinter from tkinter import ttk # 导入ttk模块, ...
- tkinter中combobox下拉选择控件(九)
combobox控件,下拉菜单控件 combobox控件在tkinter中的ttk下 简单的实现下: import tkinter from tkinter import ttk # 导入ttk模块, ...
- 如何解决FormView中实现DropDownList连动选择时出现 "Eval()、XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用" 的错误
原文:如何解决FormView中实现DropDownList连动选择时出现 "Eval().XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用" 的 ...
- asp.net mvc中使用jquery H5省市县三级地区选择控件
地区选择是项目开发中常用的操作,本文讲的控件是在手机端使用的选择控件,不仅可以用于实现地区选择,只要是3个级别的选择都可以实现,比如专业选择.行业选择.职位选择等.效果如下图所示: 附:本实例asp. ...
- 通用数据水平层级选择控件v0.70升级版使其支持jQuery v1.9.1
升级原因:作者原来脚本支持的jquery版本太低了,查找了下资料,使得它能支持最新版本的jquery 备注说明:脚本代码源作者跟源文出处很难找,只能在此特感谢他的分享. 更新部分: 1.新版本不再支持 ...
- 打造基于jQuery的日期选择控件
终于把jQuery拼写正确了哈,哈哈javascript也是区分大小写的,所以确实不能写错,今天我来和大家分享的是日期选择控件的实现,功能也许不够强大,但是能够满足需求. 我之前也写过(正确的说是改过 ...
随机推荐
- javascript——闭包
<script type="text/javascript"> //什么是闭包: //是指语法域位于某个特定的区域,具有持续参照(读写)位于该区域内自身范围之外的执行域 ...
- HTML TAG FROM MDN
A <a> <abbr> <acronym> <address> <applet> <area> <article> ...
- 利用set实现去重
最近读了一些有关于ES6的文章,觉得真是一个超级大的进步,就是不知道兼容性怎么样,鉴于我还在初学,先写个小例子练手,顺便时刻提醒自己要坚持学下去.未来的趋势肯定是替代es5没跑了. var arr=[ ...
- ecshop--加载初始化文件
define('IN_ECS', true);require(dirname(__FILE__) . '/../../includes/init.php'); 在开头要加入这两句文件才可以访问数据库以 ...
- 【技术宅3】截取文件和url扩展名的N种方法
//截取文件扩展名的N种方法 //第1种 //strrchr() 函数查找字符在指定字符串中最后一次出现的位置,如果成功,则返回其后面的字符串 //返回带有点的扩展名 function get_e ...
- jquery.lazyload.js图片延迟加载
转:http://www.jb51.net/article/50273.htm 这篇文章主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下 ...
- Content-Type实体首部字段
现代互联网下,每天都会有数以亿计的各种媒体对象经由HTTP传输,如图像,文本,影视以及软件程序等.这些数据都包含在HTTP报文的实体内容中,如果把HTTP报文想像成一份快递,HTTP实体就是快递实 ...
- oe 仓库管理
需求情景: 销售电商, 其中有些产品 为代理销售(公司不管理库存,建立SO后直接由对应的供应商发货即可) 解决方案: SO 生成 DO 时候 , 源库存的取得逻辑 SO-->SHO ...
- jquery获取元素的所有宽高(包括内边距和外边距)
width() - 返回元素的宽度.height() - 返回元素的高度.innerWidth() 方法返回元素的宽度(包括内边距). innerHeight() ...
- 轻松解决Win8.1连接受限或无法连接WiFi问题
在无线网络连接设置窗口中,找到当前连接的无线网络“WLAN状态”,右击查看“状态”. 在“WLAN状态”窗口中找到“无线属性”. 进入“无线网络属性”窗口,切换到“安全”页面,点击“高级设置”.最重要 ...