实用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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
javascript 类定义的4种方法
Sep 12 Javascript
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
AngularJS中filter的使用实例详解
Aug 25 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 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制作静态网站的模板框架
2006/10/09 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
PHP文件上传类实例详解
2016/04/08 PHP
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
微信小程序实现animation动画
2018/01/26 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
2014年民警工作总结
2014/11/25 职场文书
文明礼貌主题班会
2015/08/14 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
八年级作文之友谊
2019/12/02 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript