Jquery 获取表单text,areatext,radio,checkbox,select值的代码


Posted in Javascript onNovember 12, 2009

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;
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]"));
}
}

//取得下拉??蔚倪x取值

$(#testSelect option:selected').text();
或$("#testSelect").find('option:selected').text();
或$("#testSelect").val();
//////////////////////////////////////////////////////////////////
记性不好的可以收藏下:
1,下拉框:

var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)
var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值
var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值
$("#select").empty();//清空下拉框//$("#select").html('');
$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option

稍微解释一下:
1.select[@name='country'] option[@selected] 表示具有name 属性,
并且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素;
可以看出有@开头的就表示后面跟的是属性。

2,单选框:
$("input[@type=radio][@checked]").val(); //得到单选框的选中项的值(注意中间没有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)

3,复选框:
$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值
$("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出
alert($(this).val());
});

$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾

当然jquery的选择器是强大的. 还有很多方法.

<script src="jquery-1.2.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#selectTest").change(function()
{
//alert("Hello");
//alert($("#selectTest").attr("name"));
//$("a").attr("href","xx.html");
//window.location.href="xx.html";
//alert($("#selectTest").val());
alert($("#selectTest option[@selected]").text());
$("#selectTest").attr("value", "2");

});
});
</script>

<a href="#">aaass</a>

<!--下拉框-->
<select id="selectTest" name="selectTest">
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
<option value="4">44</option>
<option value="5">55</option>
<option value="6">66</option>
</select>
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;
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的项目为当前选中项
$("<optionvalue='1'>1111</option><optionvalue='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框

获取一组radio被选中项的值
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
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();//清空下拉框

Javascript 相关文章推荐
关于jQuery中的end()使用方法
Jul 10 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
Angular5.1新功能分享
Dec 21 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
vuex存值与取值的实例
Nov 06 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 Javascript
两个select之间option的互相添加操作(jquery实现)
Nov 12 #Javascript
XHTML下,JS浮动代码失效的问题
Nov 12 #Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 #Javascript
Javascript 定时器调用传递参数的方法
Nov 12 #Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 #Javascript
JS解析XML的实现代码
Nov 12 #Javascript
跨域表单提交状态的变相判断代码
Nov 12 #Javascript
You might like
php设计模式 Template (模板模式)
2011/06/26 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
Python 初始化多维数组代码
2008/09/06 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
python+pyqt5编写md5生成器
2019/03/18 Python
django的csrf实现过程详解
2019/07/26 Python
Html5定位终极解决方案
2020/02/05 HTML / CSS
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
应届生求职自荐信
2014/07/04 职场文书
音乐学专业求职信
2014/07/22 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
无犯罪记录证明样本
2015/06/16 职场文书