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动态给table添加、删除行 改进版
Jan 19 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
HTML上传控件取消选择
Mar 06 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
加速vue组件渲染之性能优化
Apr 09 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 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+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
JS实现滑动插件
2020/01/15 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
使用python分析git log日志示例
2014/02/27 Python
Python实现发送email的几种常用方法
2014/08/18 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
优秀学生事迹材料
2014/02/08 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
python tkinter实现定时关机
2021/04/21 Python
浅谈Python类的单继承相关知识
2021/05/12 Python
手残删除python之后的补救方法
2021/06/26 Python
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python
详解CSS3浏览器兼容
2022/12/24 HTML / CSS