实用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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
用jQuery简化JavaScript开发分析
Feb 19 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 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
服务器端解压缩zip的脚本
2006/12/22 PHP
php简单封装了一些常用JS操作
2007/02/25 PHP
Views rows style模板重写代码
2011/05/16 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
Javascript 遍历对象中的子对象
2009/07/03 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
Jupyter加载文件的实现方法
2020/04/14 Python
django form和field具体方法和属性说明
2020/07/09 Python
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
高考备战决心书
2014/03/11 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
2014年环保工作总结
2014/11/26 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers