AI智能
改变未来

jQuery之多组全选


HTML代码:

[code]<!doctype html><html><head><meta charset=\"utf-8\"><title>多组全选</title><link rel=\"stylesheet\" type=\"text/css\" href=\"css1.css\"/><script src=\"jquery.js\"></script><script>$(function(){$(\".input\").click(function(){if(this.checked){$(this).parents(\'div.row1\').find(\"input[name=\'checkbox\']\").prop(\"checked\",\"true\");}else{$(this).parents(\'div.row1\').find(\"input[name=\'checkbox\']\").prop(\"checked\",false);}});$(\"input[name=\'checkbox\']\").click(function(){var selectedlength=$(this).parents(\'div.form-inline\').find(\"input[name=\'checkbox\']:checked\").length;var alllength=$(this).parents(\'div.form-inline\').children().length;if( selectedlength==alllength){$(this).closest(\'div.row1\').find(\".input\").prop(\"checked\",true);}else{$(this).closest(\'div.row1\').find(\".input\").prop(\"checked\",false);}});});</script></head><body><div class=\"panel-body\"><div class=\"row1\"><div class=\"row1-title\"><label><input class=\"input\" type=\"checkbox\"><span>消息公告</span></label></div><div class=\"row1-content\"><div class=\"form-inline clearfix\"><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>查询本校</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>查询全部</span></label></div></div></div></div><div class=\"row1\"><div class=\"row1-title\"><label><input class=\"input\" type=\"checkbox\"><span>报名资料</span></label></div><div class=\"row1-content\"><div class=\"form-inline clearfix\"><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>增加</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>修改</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>删除</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>导入</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>导出</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>查询本校</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>查询全部</span></label></div></div></div></div><div class=\"row1\"><div class=\"row1-title\"><label><input class=\"input\" type=\"checkbox\"><span>培训作业</span></label></div><div class=\"row1-content\"><div class=\"form-inline clearfix\"><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>删除</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>导入</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>导出</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>查询本校</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>查询全部</span></label></div></div></div></div><div class=\"row1\"><div class=\"row1-title\"><label><input class=\"input\" type=\"checkbox\"><span>通知管理</span></label></div><div class=\"row1-content\"><div class=\"form-inline clearfix\"><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>通知编辑</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>审核</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>发布</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>取消通知</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>历史发布</span></label></div></div></div></div><div class=\"row1\"><div class=\"row1-title\"><label><input class=\"input\" type=\"checkbox\"><span>系统管理</span></label></div><div class=\"row1-content\"><div class=\"form-inline clearfix\"><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>用户管理</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>角色设置</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>单位设置</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>个人资料</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>修改密码</span></label></div><div class=\"fl\"><label><input type=\"checkbox\" name=\"checkbox\"><span>系统初始化</span></label></div></div></div></div></div></body></html>

css代码:

[code]@charset \"utf-8\";/* CSS Document */.panel-body {width:700px;margin:0 auto;}.row1 {width:100%;}.row1-title {font-size:13px;line-height:29px;height:29px;border-bottom:1px solid #b4c4d1;background-color:#e8f1f7;}.row1-title span {margin-left:5px;}.row1-title label {margin-left:5px;margin-top:-5px;}.row1-content {height:29px;padding-left:7px;border-bottom:1px solid #b4c4d1;background-color:#fff;}.row1-content label {margin-left:18px;}.row1-content input {line-height:29px;vertical-align:middle;}.row1-content span {line-height:29px;margin-left:2px;vertical-align:middle;}.row1-content .form-inline {padding-top:0;}.one {background:#9FC;}.two {background:#FC6;}.fl {float:left;}

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » jQuery之多组全选