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 Validation里默认的验证方法
Feb 14 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
微信小程序利用云函数获取手机号码
Dec 17 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.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
php创建多级目录的方法
2015/03/24 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
解决laravel session失效的问题
2019/10/14 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
windows下python安装pip图文教程
2018/05/25 Python
python打开windows应用程序的实例
2019/06/28 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
班主任工作年限证明
2014/01/12 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
python OpenCV学习笔记
2021/03/31 Python
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
Python 实现定积分与二重定积分的操作
2021/05/26 Python
解决Oracle数据库用户密码过期
2022/05/11 Oracle
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android