jQuery实现检验盒全选功能完整实例

本文实例讲述了框架实现检验盒全选功能。分享给大家供大家参考，具体如下：

！DOCTYPE html html hearteta charset=' utf-8 '标题www。JB 51。net jQuery实现检验盒全选/title脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js/script脚本语言=' JavaScript '类型=' text/JavaScript '/* *统一设置所有条目的*/函数setItemCheckBox(标志){ $(' : checkbox[name=CheckBoxbtn]').道具('已检查'，标志);} $(function () { //点击全选$('#selectAll ').单击(函数(){ //1 .获取全选的状态定义变量标志=this.checked//获取全选的状态if(flag){ $(this).prop('checked '，true)；}else{ $(this).prop('checked '，false)；}//var flag=$(' : checkbox[name=selectAll]').attr('选中');//jquery-1.5.1的用法//2.让所有条目的复选框与全选的状态同步//警报(标志);setItemCheckBox(标志);});//给所有复选框添加事件$(' :复选框[name=CheckBoxbtn]').单击(function(){ var FlagV=this。已检查；if(flagV){ $(this).prop('checked '，true)；}else{ $(this).prop('checked '，false)；} //获取所有复选框的个数var len=$(' : checkbox[name=CheckBoxbtn]').长度；//获取所有被选中的复选框的个数var checked _ len=$(' : checkbox[name=checkbox BTN]: checkbox ').长度；if(len==checked_len){ //alert('全选中了');$('#selectAll ').prop('checked '，true)；} else if(checked _ len==0){ $(' # selectAll ').prop('checked '，false)；} else { $('#selectAll ').prop('checked '，false)；} });});/scriptbodydiv id='songList '输入类型='复选框'值='歌曲1' name='checkboxBtn'/歌曲1br /输入类型='复选框'值='歌曲2' name='checkboxBtn'/歌曲2br /输入类型='复选框'值='歌曲3' name='checkboxBtn'/歌曲3br//预测类型='复选框' id='选择所有'名称='选择所有BTN '/全选br //body/html使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun运行测试效果如下：

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery表格(table)操作技巧汇总》 、 《jQuery页面元素操作技巧汇总》 、 《jQuery常见事件用法与技巧总结》 、 《jQuery form操作技巧汇总》 、 《jQuery常用插件及用法总结》 、 《jQuery扩展技巧总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。