实用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 相关文章推荐
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
vue实现微信分享功能
Nov 28 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
vue 限制input只能输入正数的操作
Aug 05 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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
UCenter Home二次开发指南
2009/05/28 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
php接口隔离原则实例分析
2019/11/11 PHP
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
Python re模块介绍
2014/11/30 Python
python写日志封装类实例
2015/06/28 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
Python进行数据提取的方法总结
2016/08/22 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
会计应聘求职信范文
2013/12/17 职场文书
优秀干部获奖感言
2014/01/31 职场文书
销售助理岗位职责
2015/02/11 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
创业计划书之网吧
2019/10/10 职场文书
python 实现定时任务的四种方式
2021/04/01 Python
PHP实现考试倒计时功能代码
2021/04/16 PHP
Vue实现动态查询规则生成组件
2021/05/27 Vue.js