实用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 相关文章推荐
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 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面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
js 函数的副作用分析
2011/08/23 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
javascript实现连续赋值
2015/08/10 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
Angular排序实例详解
2017/06/28 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
python调用百度语音REST API
2018/08/30 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
keras 读取多标签图像数据方式
2020/06/12 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
过滤器的用法
2013/10/08 面试题
学生保证书范文
2014/04/28 职场文书
幼儿评语大全
2014/04/30 职场文书
5.12护士节活动总结
2015/02/10 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis