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 相关文章推荐
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
如何提高数据访问速度
Dec 26 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
Vue 事件处理操作实例详解
Mar 05 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 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
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
实例讲解php实现多线程
2019/01/27 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
深入研究React中setState源码
2017/11/17 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
Django admin美化插件suit使用示例
2017/12/12 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
python多线程与多进程及其区别详解
2019/08/08 Python
python manage.py runserver流程解析
2019/11/08 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
用python实现学生管理系统
2020/07/24 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
临床医学专业求职信
2014/08/08 职场文书
2014年就业工作总结
2014/11/26 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书