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 相关文章推荐
setAttribute 与 class冲突解决
Feb 17 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
分享网页检测摇一摇实例代码
Jan 14 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
抓取YAHOO股票报价的类
2009/05/15 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
python实现封装得到virustotal扫描结果
2014/10/05 Python
python提取内容关键词的方法
2015/03/16 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
python使用tornado实现登录和登出
2018/07/28 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
python 操作hive pyhs2方式
2019/12/21 Python
python数据爬下来保存的位置
2020/02/17 Python
详解Flask前后端分离项目案例
2020/07/24 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
上海微创软件面试题
2012/06/14 面试题
主持人演讲稿
2014/05/13 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
2015年教研工作总结
2015/05/23 职场文书