实用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 相关文章推荐
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
JavaScrip如果基于url实现图片下载
Jul 03 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数组交集的优化代码分析
2011/03/06 PHP
微博短链接算法php版本实现代码
2012/09/15 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
扒一扒JavaScript 预解释
2015/01/28 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
python实现解数独程序代码
2017/04/12 Python
tensorflow识别自己手写数字
2018/03/14 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
甲方资料员岗位职责
2013/12/13 职场文书
学生会干部自荐信
2014/02/04 职场文书
环保口号大全
2014/06/12 职场文书
内科护士节演讲稿
2014/09/11 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
工作失误检讨书
2015/01/26 职场文书
教师辞职信范文
2015/02/28 职场文书
2015年组织部工作总结
2015/04/03 职场文书
国庆节新闻稿
2015/07/17 职场文书
礼貌问候语大全
2015/11/10 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
python前后端自定义分页器
2022/04/13 Python