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 相关文章推荐
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 Javascript
用JS实现选项卡
Mar 23 Javascript
js实现省级联动(数据结构优化)
Jul 17 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 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
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
javascript动画效果类封装代码
2007/08/28 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
python中字典dict常用操作方法实例总结
2015/04/04 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
python3.7.0的安装步骤
2018/08/27 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
python中round函数如何使用
2020/06/19 Python
如何验证python安装成功
2020/07/06 Python
监理员的岗位职责
2013/11/13 职场文书
大四自我鉴定
2014/02/08 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
财政局个人总结
2015/03/04 职场文书