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 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
JavaScript 事件记录使用说明
Oct 20 Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
FCKeditor的安装(PHP)
2007/01/13 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
php发送post请求函数分享
2014/03/06 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
拉丁舞学习者的自我评价
2013/10/27 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
运动会加油稿50字
2015/07/21 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
python多次执行绘制条形图
2022/04/20 Python