实用jquery操作表单元素的简单代码


Posted in Javascript onJuly 04, 2016

取下拉菜单选中项的文本; 获取和设置下拉菜单的值; 清空下拉菜单; 给下列菜单添加元素; 取单选框值; 单选或复选按钮的选择; 取复选框值; 判断单选或复选框是否被选中; 元素可用不可用; 判断元素可用不可用。

实用jquery操作表单元素代码

/*

假设在一个表单中有一个按钮id="save"
$(document).ready(function(){
   $("#save").click(function(){
    $("#save").attr("disabled",true);//设为不可用             
    $("#form1")[0].submit();//如果你有很多个id为form1的表单也没关系,只有第一个会提交的哈哈.
   });
});

取下拉菜单选中项的文本;

获取和设置下拉菜单的值;

清空下拉菜单;

给下列菜单添加元素;

取单选框值;

单选或复选按钮的选择;

取复选框值;

判断单选或复选框是否被选中;

元素可用不可用;

判断元素可用不可用。

1. 取下拉菜单选中项的文本

$("#select option[selected]").text();//select和option之间有空格,option为select的子元素  
$("#select option:selected").text();//如果写成$("#select").text();会把所有下拉菜单的文本选择出来

2.获取和设置下拉菜单的值

$("#select").val();//取值  
$("#select").val("value");//设置,如果select中有值为value的选项,该选项就会被选中,如果不存在,则select不做任何变动

3.清空下拉菜单

$("#select").empty();  
$("#select").html("");

4.给下列菜单添加元素

$('<option value="1">1</option>').appendto($("#select"));  
$("#select").append('<option value="1">1</option>');

5.取单选框值

$("#id[checked]").val();

6.单选或复选按钮的选择

$("#id[value=val]").attr("checked",true);//选择  
$("#id[value=val]").attr("checked","");//取消选择  
$("#id[value=val]").attr("checked",false);//取消选择  
$("#id[value=val]").removeattr("checked");//取消选择

7.取复选框值

$("input[type=checkbox][checked]").each(function(){  
alert($(this).val());  
})  

//如果用$("input[type=checkbox][checked]").val(),只会返回第一个被选中的值

8.判断单选或复选框是否被选中

if($("#id").attr("checked")){}//判断选中  
if($("#id").attr("checked")==true){}//判断选中  
if($("#id").attr("checked")==undefined){}//判断未选中

9.元素可用不可用

$("#id").attr("disabled",false);//设为可用  
$("#id").attr("disabled",true);//设为不可用

10.判断元素可用不可用

if($("#id").attr("disabled")){}//判断不可用  
if($("#id").attr("disabled")==undefined){}//判断可用

以上这篇实用jquery操作表单元素的简单代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中获取数据库中的值的方法
Jul 14 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
angular共享依赖的解决方案分享
Oct 15 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 #Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 #Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 #Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 #Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 #Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 #Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 #Javascript
You might like
PHP生成静态页
2006/11/25 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
Python基础入门之seed()方法的使用
2015/05/15 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
python如何写try语句
2020/07/14 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
文化宣传方案
2014/03/13 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
2015年度保密工作总结
2015/04/24 职场文书
计算机教师工作总结
2015/08/13 职场文书
Mysql binlog日志文件过大的解决
2021/10/05 MySQL
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
Nginx实现会话保持的两种方式
2022/03/18 Servers
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs