实用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之undefined篇(上)
Nov 22 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
微信小程序订阅消息(java后端实现)开发
Jun 01 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 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查询分页的实现代码
2017/06/09 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
2017/11/09 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
python实现一次创建多级目录的方法
2015/05/15 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Python并行分布式框架Celery详解
2018/10/15 Python
python实现简单的文字识别
2018/11/27 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
html5启动原生APP总结
2020/07/03 HTML / CSS
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
最新自我评价范文
2013/11/16 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
超市周年庆活动方案
2014/08/16 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
学生保证书
2015/01/16 职场文书