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 相关文章推荐
复制本贴标题和地址的js代码
Jul 01 Javascript
JavaScript类和继承 prototype属性
Sep 03 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
如何在JavaScript中等分数组的实现
Dec 13 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生成Flash动画的实现代码
2010/03/12 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
javascript 写类方式之四
2009/07/05 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
python和bash统计CPU利用率的方法
2015/07/10 Python
在Python中定义一个常量的方法
2018/11/10 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
在python中求分布函数相关的包实例
2020/04/15 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
python request 模块详细介绍
2020/11/10 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
阿里旅行:飞猪
2017/01/05 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
领导欢迎词范文
2015/01/26 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
军事理论课感想
2015/08/11 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python