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 相关文章推荐
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
Array.filter中如何正确使用Async
Nov 04 Javascript
JavaScript 异步时序问题
Nov 20 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
是否存在第一台收音机的说法
2021/03/01 无线电
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
封装好的省市地区联动控件附下载
2007/08/13 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
react路由配置方式详解
2017/08/07 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
python2.7安装图文教程
2018/03/13 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
python tkinter基本属性详解
2019/09/16 Python
python语言中有算法吗
2020/06/16 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
装饰资料员岗位职责
2013/12/30 职场文书
工作态度检讨书
2014/02/11 职场文书
庆祝教师节标语
2014/10/09 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
关于环保的宣传稿
2015/07/23 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
新学期家长寄语2016
2015/12/03 职场文书
创业计划书之甜品店
2019/09/18 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL