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 相关文章推荐
用于table内容排序
Jul 21 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
Dec 31 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
如何利用React实现图片识别App
Feb 18 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 jquery 多文件上传简单实例
2013/12/23 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
python学习之面向对象【入门初级篇】
2017/01/21 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
使用Python的turtle模块画国旗
2019/09/24 Python
python队列原理及实现方法示例
2019/11/27 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
投资公司董事长岗位职责
2015/04/16 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL