实用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 相关文章推荐
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
javascript 实现map集合
Apr 03 Javascript
JavaScript中DOM详解
Apr 13 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
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可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
Javascript 汉字字节判断
2009/08/01 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
Script的加载方法小结
2011/01/12 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
Vue.directive使用注意(小结)
2018/08/31 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
《搭石》教学反思
2014/04/07 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
民主评议党员总结
2014/10/20 职场文书
安徽导游词
2015/02/12 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
python函数的两种嵌套方法使用
2022/04/02 Python
mysql sock文件存储了什么信息
2022/07/15 MySQL
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS