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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
vue中render函数的使用详解
Oct 12 Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 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
基于empty函数的判断详解
2013/06/17 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
PHP文件操作详解
2016/12/30 PHP
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
python中zip和unzip数据的方法
2015/05/27 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
django项目搭建与Session使用详解
2018/10/10 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
Python中url标签使用知识点总结
2020/01/16 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
培训心得体会怎么写
2016/01/25 职场文书
科普 | 业余无线电知识-波段篇
2022/02/18 无线电