实用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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
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定时计划任务的实现方法详解
2013/06/06 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
新郎新娘婚礼答谢词
2014/01/11 职场文书
销售类求职信
2014/06/13 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
安徽导游词
2015/02/12 职场文书
保卫工作个人总结
2015/03/03 职场文书
党员转正介绍人意见
2015/06/03 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
初中生物教学反思
2016/02/20 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL