jquery对表单操作2


Posted in Javascript onApril 06, 2011

checkbox的级联效果

<form> 
你爱好的运动?<br/> 
<input type="checkbox" id="CheckedAll" />全选/全不选<br/> 
<input type="checkbox" name="items" value="足球"/>足球 
<input type="checkbox" name="items" value="篮球"/>篮球 
<input type="checkbox" name="items" value="羽毛球"/>羽毛球 
<input type="checkbox" name="items" value="乒乓球"/>乓球球 
<input type="button" id="send" value="提 交"/> 
$('#CheckedAll').click(function(){ 
$('[name=items]:checkbox').attr("checked", this.checked); 
})

当单击id为"CheckedAll"的复选框后,复选框组将被选中,当在复选框组中取消某一个选项的选中状态时,id为"CheckedAll"的复选框并没有被取消选中状态。
为解决这个问题:
$('[name=items]:checkbox').click( 
function(){ 
var flag = true; 
$('[name=items]:checkbox').each(function(){ 
if(!this.checked) 
flag = false; 
}); 
$('#CheckedAll').attr('checked', flag); 
}) 
//或者可以用复选框的总数与选中复选框数量相等 
$('[name=items]:checkbox').click( 
function(){ 
var $tmp = $('[name=items]:checkbox'); 
//使用filter方法筛选出复选框,并直接给CheckedAll赋值 
$('#CheckedAll').attr('checked', $tmp.length == $tmp.filter(':checked').length); 
})

下拉框的应用
<div class="content"> 
<select multiple id="select1" style="width:100px;height:100px;"> 
<option value="1">选项1</option> 
<option value="2">选项2</option> 
<option value="3">选项3</option> 
<option value="4">选项4</option> 
<option value="5">选项5</option> 
<option value="6">选项6</option> 
<option value="7">选项7</option> 
</select> 
<div> 
<span id="add">选中添加到右边</span> 
<span id="add_all">全部添加到右边</span> 
</div> 
</div> 
<div class="content"> 
<select multiple id="select2" style="width:100px;height:100px;"> 
</select> 
<div> 
<span id="add">选中添加到左边</span> 
<span id="add_all">全部添加到左边</span> 
</div> 
<div> 
//将选中的选项添加给对方 
$('#add').click(function(){ 
var $options = $('#select1 option:selected');//获取选中的选项 
$options.appendTo('#select2');//追加给对方 
}); 
//将全部的选项添加给对方 
$('#add').click(function(){ 
var $options = $('#select1 option');//获取选中的选项 
$options.appendTo('#select2');//追加给对方 
}); 
//双击某个选项添加给对方 
$('#select1').dblclick(function(){ 
var $options = $('option:selected',this);//获取选中的选项 
$options.appendTo('#select2');//追加给对方 
})

PS: $('option:selected',this),$()有2个参数,一个是选择器,一个是作用域。相当于$('#select1 option:selected')
Javascript 相关文章推荐
jQuery的12招常用技巧分享
Aug 08 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 Javascript
jQuery对表单的操作代码集合
Apr 06 #Javascript
24款非常有用的 jQuery 插件分享
Apr 06 #Javascript
jquery常用技巧及常用方法列表集合
Apr 06 #Javascript
jQuery参数列表集合
Apr 06 #Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 #Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 #Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 #Javascript
You might like
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
在网页里看flash的trace数据的js类
2009/01/10 Javascript
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
在Python的循环体中使用else语句的方法
2015/03/30 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
车辆维修工自我评价怎么写
2013/09/20 职场文书
《胡杨》教学反思
2014/02/16 职场文书
搞笑创意广告语
2014/03/17 职场文书
中秋寄语大全
2014/04/11 职场文书
灰雀教学反思
2014/04/28 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
助学贷款贫困证明
2014/09/23 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书