实用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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
vue实现简单跑马灯效果
May 25 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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
关于图片验证码设计的思考
2007/01/29 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
python批量下载图片的三种方法
2013/04/22 Python
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
Python实现统计单词出现的个数
2015/05/28 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
python实现二维数组的对角线遍历
2019/03/02 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
python mysql断开重连的实现方法
2019/07/26 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
教务处干事工作总结
2015/08/14 职场文书
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸
基于Python实现射击小游戏的制作
2022/04/06 Python