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 相关文章推荐
理解Javascript_08_函数对象
Oct 15 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
JS实现滑动插件
Jan 15 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
php循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
Python程序语言快速上手教程
2012/07/18 Python
Python socket编程实例详解
2015/05/27 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
python实现点对点聊天程序
2018/07/28 Python
用Python读取几十万行文本数据
2018/12/24 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
android面试问题与答案
2016/12/27 面试题
求职个人评价范文
2014/04/09 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
2014年教研工作总结
2014/12/06 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python