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 相关文章推荐
asp批量修改记录的代码
Jun 25 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
JavaScript如何实现图片处理与合成
May 29 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
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
分享一个常用的Python模拟登陆类
2015/03/29 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
python基于phantomjs实现导入图片
2016/05/13 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
numpy.random模块用法总结
2019/05/27 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
解决python 找不到module的问题
2020/02/12 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
linux面试题参考答案(4)
2014/09/21 面试题
Java如何调用外部Exe程序
2015/07/04 面试题
园林技术个人的自我评价
2014/01/08 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
教师党员整改措施
2014/10/24 职场文书
七一晚会主持词
2015/06/29 职场文书