jQuery操作input值的各种方法总结


Posted in Javascript onNovember 21, 2013

获取选中的值
获取一组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");
$("#txt").val();

多选框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();//清空下拉框

=====================

在Jquery中,用$("#id")来获得页面的input元素,其相当于document.getElementById("element") 但是,该获取的是一个Jquery对象,而不是一个dom element对象.value是dom element对象的属性.所以,使用 $("#id").value不能取到值 取值的方法如下: 取值:val = $("#id")[0].value; $("#id")[0].value = "new value"; 赋值: $("#id")[0].value = "new value";
或者$("#id").val("new value"); val = $("#id").attr("value");

==================================

jquery input text radio check select

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-starterkit/lib/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<input type="text" id="dd" name="dd" value="dds"/>dd
<input name="rr" id="rr" type="radio" value="34" />ff
<input name="rr" id="rr2" type="radio" value="4" />55
<input name="ff" type="checkbox" value="aa" />jgdg
<input name="ff" type="checkbox" value="gd" />jgdg
<select name="ss" id="ss" size="1">
<option value=""></option>
<option value="8">d</option>
<option value="2">g</option>
</select>
<br/>
<input type="button" id="button" value="按钮一" />
<input type="button" id="jj" value="按钮二" />
<br/>
<div id="ssd">fgfooHello</div>
</body>
<script language="javascript" type="text/javascript">
<!--
$(function(){
$("#button").click(function(){

//获取值
//alert( $('#dd').val());//type=text
// alert($('input[name=rr][checked]').val());//type=radio
// alert($('input[name=ff][checked]').val());//type=checkbox
// alert($("select[name=ss] option[selected]").val());//select 相等于alert($("#ss option[selected]").val());
//获取文本
//alert($("select[name=ss] option[selected]").text());//select

//控制
/*// Disable #dd 禁用
$("#dd").attr("disabled","disabled");
// Enable #dd 解禁
$("#jj").removeAttr("disabled");*/

// $('input[name=rr]').get(0).checked = true;//第一个radio被选中
//alert($("input[type=radio][value=34]").attr("checked",'checked'));//value=34的radio被选中
//alert($("input[type=checkbox][value=gd]").attr("checked",'checked'));//value=gd的checkbox被选中
//$('input[name=ff]').get(1).checked = true;//第一个check被选中
 
/*//根据option的text选中option
count=$("#ss").find("option").length;
for(var i=0;i<count;i++) 
{           
if($("#ss").get(0).options[i].text == 'd') 
{ 
$("#ss").get(0).options[i].selected = true; 
break; 
} 
} */
//$("<option value='1'>1111</option><option value='25'>22s22</option>").appendTo("#ss");//增加option
//$("#ss option[value=8]").remove("");//除去 <option value='8'>d</option>
//$("#ss").attr("value",'2');//选中option                            
//$('#ss')[0].selectedIndex = 1;//选中option
//$("#ss").empty();//清空全部option
/*//替换文本
var $thirdLink = $("#ssd");
var linkText = $thirdLink.text().replace('foo','bar');
$thirdLink.text(linkText); */
});       
});
-->
</script>
</html>
Javascript 相关文章推荐
点击文章内容处弹出页面代码
Oct 01 Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
统计jQuery中各字符串出现次数的工具
May 03 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
JS画5角星方法介绍
Sep 17 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
AngularJS表单验证功能分析
May 26 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
jqgrid 表格数据导出实例
Nov 21 #Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 #Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 #Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 #Javascript
js 实现菜单上下显示附效果图
Nov 21 #Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 #Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 #Javascript
You might like
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
php 用sock技术发送邮件的函数
2007/07/21 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
关于Python如何避免循环导入问题详解
2017/09/14 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
StubHub德国:购买和出售门票
2017/09/06 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
求职推荐信范文
2013/12/01 职场文书
入团者的自我评价分享
2013/12/02 职场文书
玲玲的画教学反思
2014/02/04 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
医院保洁服务方案
2014/06/11 职场文书
房产公证书格式
2015/01/26 职场文书
小学运动会开幕词
2015/01/28 职场文书
推普标语口号大全
2015/12/26 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python