<%@?page?language="java"?import="java.util.*"?pageEncoding="UTF-8"%>?
<%
String?path?=?request.getContextPath();
String?basePath?=?request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">
<html>
<head><base?href="<%=basePath%>">
<!--?jQuery?-->
<script?src="jquery/jquery-1.11.1.js"></script>
<!--?可選的Bootstrap?signin?-->
<script?type="text/javascript"?src="myscjh/plugins/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<!--添加所需的JS-->
<script?type="text/javascript"?src="js/baiduzhidao.js"></script>
<!--添加所需的CSS-->
<link?rel="stylesheet"?href="myscjh/plugins/bootstrap-3.2.0-dist/css/jumbotron-narrow.css">
<link?rel="stylesheet"?href="myscjh/plugins/bootstrap-3.2.0-dist/css/bootstrap.min.css">
<link?rel="stylesheet"?href="myscjh/plugins/bootstrap-3.2.0-dist/css/bootstrap-theme.min.css">
</head>
<body> <input?class="btn?btn-success"?type="button"?data-toggle='modal'?data-target='#myModal'?onclick="baiduzhidao.cleardata()"?value="Add"> ?<div?id="add"></div> ?<!--?Modal?--><div?class="modal?fade"?id="myModal"?tabindex="-1"?role="dialog"?aria-labelledby="myModalLabel"?aria-hidden="true">
<div?class="modal-dialog"><div?class="modal-content">
<div?class="modal-header"><button?type="button"?class="close"?data-dismiss="modal"><span?aria-hidden="true">×</span><span?class="sr-only">Close</span></button>
<h4?class="modal-title"?id="myModalLabel">Dialog?Modal</h4>
</div> <div?class="modal-body">?<div?id="collapse_magic"?class="panel-group"?jsselect="auths"?role="tablist"?aria-multiselectable="true">
<div?class="panel?panel-info">
<div?class="panel-heading"?>
<h4?class="panel-title">
<input?type="checkbox"?onclick="baiduzhidao.checkall(this)"></input>
<a?class="check-fixed"?jscontent="name"?data-toggle="collapse"?data-parent="#collapse_magic"?href="#collapse_magic_User"?aria-expanded="false"?aria-controls="collapse_magic_User">Menu</a>
<label?class="navbar-right"?jstcache="0"></label>
</h4>
</div>
<div?id="collapse_magic_User"?class="panel-collapse?collapse?in"?role="tabpanel"?style="">
<div?class="panel-body"?>
<div?class="input-group">
<span?class="input-group-addon">
<input?class="authitem"?type="checkbox"?onclick="baiduzhidao.checksum(this)"></input>
</span>
<button?class="btn?btn-info?form-control"?type="button"?>apple</button>
</div>
<div?class="input-group">
<span?class="input-group-addon">
<input?class="authitem"?type="checkbox"?onclick="baiduzhidao.checksum(this)"></input>
</span>
<button?class="btn?btn-info?form-control"?type="button">banana</button>
</div>
<div?class="input-group">
<span?class="input-group-addon">
<input?class="authitem"?type="checkbox"?onclick="baiduzhidao.checksum(this)"></input>
</span>
<button?class="btn?btn-info?form-control"?type="button">orange</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div?class="modal-footer"><button?type="button"?class="btn?btn-primary"?onclick="baiduzhidao.save();"?data-dismiss="modal">Save</button>
</div></div>
</div></div>
</body></html>baiduzhidao.js
if(!baiduzhidao){
var?baiduzhidao?={
cleardata:function(){
$(":checkbox").prop("checked",false);//清除所有checkbox
$("h4?label").html("");
},
checksum:function(_this){
var?temp?=?$(_this).parent().parent().parent();
var?sum?=?temp.children().children("span").children(":checked").length;
var?str?=?"";
if(sum!=0)?str?+="["+sum+"]";
var?checksum?=temp.parent().prev().children().children("label");
checksum.html(str);
},
checkall:function(_this){
var?checksum?=?$(_this).siblings("label");
var?temp?=?$(_this).parent().parent();
var?checkitem?=?temp.next().children().children().children("span").children("input");//獲取所有checkbox
var?sum?=?checkitem.length;
checkitem.prop("checked",$(_this).prop("checked"));//與全選同步
var?str="";
if($(_this).prop("checked")){
str?+="["+sum+"]";
}
checksum.html(str);
},
getallchecked:function(){
var?arr?=?[];
$(".authitem:checked").each(function(i,e){
arr.push($(e).parent().next().html());
})
return?arr;
},
addtion:function(_this){
var?data?=?$(_this).prev().val();
var?intdata?=?parseInt(data);
$(_this).prev().val(++intdata);
},
subtraction:function(_this){
var?data?=?$(_this).next().val();
var?intdata?=?parseInt(data);
$(_this).next().val(intdata==1?intdata:--intdata);
},
save:function(){
var?arr=[];
var?str="";
arr?=?baiduzhidao.getallchecked();
for(var?i=0;i<arr.length;i++){
//根據妳自己需要的格式進行調整
str?+=?"<div?class='alert?alert-success?alert-dismissible?fade?in'?role='alert'><button?class='close'?data-dismiss='alert'?type='button'><span?aria-hidden='true'>×</span><span?class='sr-only'>Close</span></button><div><label?class='control-label'?for='inputError2'>"+arr[i]+"</label><input?type='button'?onclick='baiduzhidao.subtraction(this)'?value='-'><input?type='text'?value='1'?readonly><input?type='button'?onclick='baiduzhidao.addtion(this)'?value='+'></div></div>";
}
$("#add").html(str);
}
}
}
經測試通過 可行 ?截圖
界面自己根據自己需要調整 若有什麽疑問 QQ 278750600