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 相关文章推荐
javascript之对系统的toFixed()方法的修正
May 08 Javascript
jQuery的三种$()
Dec 30 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 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
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
降低python版本的操作方法
2020/09/11 Python
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
劳资员岗位职责
2013/11/11 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
解除合同协议书
2014/04/17 职场文书
求职信标题怎么写
2014/05/26 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
给上级领导的感谢信
2015/01/22 职场文书
JavaScript的function函数详细介绍
2021/11/20 Javascript
python turtle绘图命令及案例
2021/11/23 Python
24年收藏2000多部退役军用电台
2022/02/18 无线电
python的html标准库
2022/04/29 Python
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android