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 相关文章推荐
js 链式延迟执行DOME
Jan 04 Javascript
javascript学习(一)构建自己的JS库
Jan 02 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
Electron整合React使用搭建开发环境的步骤详解
Jun 07 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多用户计数器代码
2007/03/11 PHP
php下使用无限生命期Session的方法
2007/03/16 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
Use Word to Search for Files
2007/06/15 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python双向链表实现实例代码
2013/11/21 Python
使用Python生成XML的方法实例
2017/03/21 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
Pytorch之保存读取模型实例
2019/12/30 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
英国精品买手店:Browns Fashion
2016/09/29 全球购物
抄作业检讨书
2014/02/17 职场文书
毕业生求职信
2014/06/10 职场文书
天地会口号
2014/06/17 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
可怜妈妈观后感
2015/06/09 职场文书
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫