实用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 相关文章推荐
jquery插件 cluetip 关键词注释
Jan 12 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
百度小程序自定义通用toast组件
Jul 17 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对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
js实现轮播图特效
2020/05/28 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
python获取目录下所有文件的方法
2015/06/01 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
python实现控制台打印的方法
2019/01/12 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
简单了解python列表和元组的区别
2020/05/14 Python
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
大学应届生的自我评价
2014/03/06 职场文书
优秀会计求职信
2014/07/04 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
运动员入场前导词
2015/07/20 职场文书
学会Python数据可视化必须尝试这7个库
2021/06/16 Python