jquery中通过过滤器获取表单元素的实现代码


Posted in Javascript onJuly 05, 2011

:enable 获取可输入状态的元素
:disabled 获取不可输入状态的元素
:checked 获取选中的表单元素
:seleced 获取下拉框中选中的元素
下面看一粒例子
Html

<body> 
<form id="form1" runat="server"> 
<div> 
<ul> 
<li><label>订单号码:</label><input type="text" disabled="disabled" /></li> 
<li><label>订单所有者:</label><input type="text" /></li> 
<li> 
<input type="checkbox" name="ca" value="红"/>红 
<input type="checkbox" name="ca" value="黄"/>黄 
<input type="checkbox" name="ca" value="蓝"/>蓝 
<input type="checkbox" name="ca" value="绿"/>绿 
</li> 
<li> 
<select multiple="multiple"> 
<option>选择1</option> 
<option>选择2</option> 
<option>选择3</option> 
<option>选择4</option> 
</select> 
</li> 
</ul> 
</div> 
</form> <div id="msg"> 
<p id="cc"></p> 
<p id="option"></p> </div> 
</body>

JavaScript代码:
<script type="text/javascript"> 
jQuery(function(){ 
$("input:text:disabled").val("不能输入"); 
$("input:text:enabled").val("能输入"); 
( 
function checkboxclick(){ 
$(":checkbox").unbind("click",checkboxclick); 
var vv=''; 
$(":checkbox:checked").each(function(){ 
vv+=$(this).val()+","; 
}); 
$("#cc").html("选择的数据:"+vv); 
$(":checkbox").click(checkboxclick); 
} 
)() 
$("select").change(function(){ 
var tt=''; 
$("select option:selected").each(function(){ 
tt+=$(this).text()+","; 
}); 
$("#option").html("选择的项目是:"+tt); 
}).trigger("change"); 
}); 
</script>

这里面有几点需要注意的是:
1 前面说到bind用来绑定事件,那么这里的unbind就是取消事件的
2 trigger() 方法触发被选元素的指定事件类型。
3 在jQuery(function(){里添加函数的时候,外面要加上括号,后面要加上小括号,如下
jQuery(function(){
(
function check()
{
})()
})
4 实现层中复选框选中并赋给其他元素值
html
<form id="form1" runat="server"> 
<div> 
<input type="button" id="btn1" value="弹出" /> 
<input type="checkbox" name="ca" value="红"/>红 
<input type="checkbox" name="ca" value="黄"/>黄 
<input type="checkbox" name="ca" value="蓝"/>蓝 
<input type="checkbox" name="ca" value="绿"/>绿 
<input type="checkbox" name="ca" value="白"/>白 
<input type="checkbox" name="ca" value="黑"/>黑 
</div> 
<div id="cc"></div> 
</form>

javascript
jQuery(function(){ 
( 
function checkboxclick(){ 
$(":checkbox").unbind("click",checkboxclick); 
var vv=''; 
$(":checkbox:checked").each(function(){ 
vv+=$(this).val()+","; 
}) 
$("#cc").html("选择的数据:"+vv); 
$(":checkbox").click(checkboxclick); 
})() 
})

效果图如下这种:

 jquery中通过过滤器获取表单元素的实现代码

Javascript 相关文章推荐
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
详解Javascript继承的实现
Mar 25 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
jquery中获取元素的几种方式小结
Jul 05 #Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 #Javascript
Javascript计算时间差的函数分享
Jul 04 #Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 #Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 #Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 #Javascript
JS分割字符串并放入数组的函数
Jul 04 #Javascript
You might like
咖啡的种类和口感
2021/03/03 新手入门
解析PHP实现下载文件的两种方法
2013/07/05 PHP
php短址转换实现方法
2015/02/25 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
python re正则表达式模块(Regular Expression)
2014/07/16 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
年度考核登记表个人总结
2015/03/06 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技