<!-- 正常弹出框 -->
<div class="mid-alert" id="strategyOkAlertId" style="display: none;">
<div class="alert-head">
<span class="head-icon"></span> <span class="head-word">策略匹配</span>
<span class="close-alert" id="closeStrategyOkId"></span>
</div>
<div class="alert-body">
<div class="alert-content">
<div class="content-row">
<div class="content-left">
<input type="checkbox" name="plan_EBI" id="clPlanEbiAll" class="itemSelect" checked="checked" value="511503000000000100">
</input>地点：</div>
<div class="content-right">
<div class="content-right" id="EBIPlatformId" checked="checked"></div>
</div>
</div>
<div class="content-row">
<div class="content-left"><input type="checkbox" name="plan_EBM" ?id="clPlanEbmAll" class="itemSelect" checked="checked" value="511503000000000100">
</input>景点：</div>
<div class="content-right">
<div class="content-right" id="EBMPlatformId" checked="checked"></div>
</div>
</div>
</div>
</div>
</div>
//点击节点，弹出框
$(‘#imgStrategyId‘).on(‘click‘, function(){
/* ajax从后台取到数据放入弹出框中，get方法 */
var infoId=$(‘#processInfoId‘).val();
$(‘.mid-alert‘).css(‘display‘,‘none‘);
if($(‘#imgStrategyId‘).is(‘.warn-mid‘)){
$(‘#checkboxEBIId‘).empty();
$(‘#checkboxEBMId‘).empty();
$(‘#submitStrategyId‘).attr(‘disabled‘,false);
$.ajax({
??????????????type:‘get‘,
??????????????contentType: ‘application/json‘,
??????????????url:$CONFIG[‘contextpath‘]+‘/api/duty/getStrategyMsg/‘+infoId,
??????????????success:function(data){
??????????????if(data){
??????????????var EBIArray=data.EBI;
??????????????var EBMArray=data.EBM;
??????????????if(EBIArray.length==0 && EBMArray.length==0){
??????????????$(‘#submitStrategyId‘).attr(‘disabled‘,true);
??????????}else{
??????????var checkboxHtml_EBI=‘‘;
??????????????var checkboxHtml_EBM=‘‘;
??????????????for(var i = 0; i < EBIArray.length; i++){
??????????????for(var key in EBIArray[i]){
??????????????checkboxHtml_EBI+=‘<input type="checkbox" name="alias_EBI" checked="checked" class="itemSelect" value="‘+key+‘"/>‘+EBIArray[i][key]+‘‘;
??????????????}
??????????????}
??????????????for(var i = 0; i < EBMArray.length; i++){
??????????????for(var key in EBMArray[i]){
??????????????checkboxHtml_EBM+=‘<input type="checkbox" name="alias_EBM" class="itemSelect" value="‘+key+‘"/>‘+EBMArray[i][key]+‘‘;
??????????????}
??????????????}
??????????????$(‘#checkboxEBIId‘).append(checkboxHtml_EBI);
??????????????$(‘#checkboxEBMId‘).append(checkboxHtml_EBM);
??}
??????????????$(‘#strategyAlertId‘).fadeIn(‘slow‘);
??????????????}
??????????????},
??????????????error:function(){
??????????????$FN.alert(‘<span style="color:red;float:left; padding:30px 245px;">获取失败!</span>‘);
??????????????}
???});
}else{
//清空内容
$(‘#EBIPlatformId‘).empty();
$(‘#EBMPlatformId‘).empty();
$.ajax({
??????????????type:‘get‘,
??????????????contentType: ‘application/json‘,
??????????????url:$CONFIG[‘contextpath‘]+‘/api/duty/getStrategyOkMsg/‘+infoId,
??????????????success:function(data){
??????????????var alias_EBI=‘‘;
??????????????var alias_EBM=‘‘;
//遍历子选择框的全部内容, checked="checked" 为默认全选
??????????????if(data){
??????????????for(var i = 0; i < data.EBI.length; i++){
??????????????alias_EBI+=‘<input type="checkbox" name="alias_EBI1" class="itemSelect" checked="checked" value="‘+i+‘"/>‘+data.EBI[i].alias + ‘ ‘;
??????????}
??????????????for(var i = 0; i < data.EBM.length; i++){
??????????????alias_EBM+=‘<input type="checkbox" name="alias_EBI2" class="itemSelect" ?checked="checked"value="‘+i+‘"/>‘+data.EBM[i].alias + ‘ ‘;
??????????}
??????????????$(‘#EBIPlatformId‘).html(alias_EBI);
??????????????$(‘#EBMPlatformId‘).html(alias_EBM);
??????????????$(‘#strategyOkAlertId‘).fadeIn(‘slow‘);
??????????????
//添加判断,控制点击前面主选择框的时候,子选择框随之改变选中状态 控制地点框
??????????????$(‘#clPlanEbiAll‘).click(function(){
??????????????var This = $(this);
??????????????var checked = this.checked;
??????????????if(checked){
??????????????$(‘input[name=alias_EBI1]‘).prop(‘checked‘,‘checked‘);
??????????????}else{
??????????????$(‘input[name=alias_EBI1]‘).removeAttr(‘checked‘);
??????????????}
??????????????
??????????????});
??????????????
//控制景点框
??????????????$(‘#clPlanEbmAll‘).click(function(){
??????????????var This = $(this);
??????????????var checked = this.checked;
??????????????if(checked){
??????????????$(‘input[name=alias_EBI2]‘).prop(‘checked‘,‘checked‘);
??????????????}else{
??????????????$(‘input[name=alias_EBI2]‘).removeAttr(‘checked‘);
??????????????}
??????????????
??????????????});
??????????????}
??????????????},
??????????????error:function(){
??????????????$FN.alert(‘<span style="color:red;float:left; padding:30px 245px;">获取失败!</span>‘);
??????????????}
???});
}
});
//点击右上角X关闭弹出框
$(‘#closeStrategyId‘).on(‘click‘, function(){
$(‘#strategyAlertId‘).fadeOut(‘slow‘);
})
$(‘#closeStrategyOkId‘).on(‘click‘, function(){
$(‘#strategyOkAlertId‘).fadeOut(‘slow‘);
})
//点击提交按钮，把数据提交后台，关闭弹出框
$(‘#submitStrategyId‘).on(‘click‘,function(){
/* ajax把弹出框数据传给后台 ，get*/
var infoId=$(‘#processInfoId‘).val();
var platIdStr=‘‘;
var processNode=‘4‘;
//地点
???????????$(‘input[name="alias_EBI"]:checked‘).each(function(){
???????????platIdStr+=$(this).val()+",";
???????????});
???????????//景点???
???????????$(‘input[name="alias_EBM"]:checked‘).each(function(){
???????????platIdStr+=$(this).val()+",";
???????????});
$.ajax({
??????????????type:‘get‘,
??????????????contentType: ‘application/json‘,
??????????????url:$CONFIG[‘contextpath‘]+‘/api/duty/sendInstruction/‘+infoId+‘/‘+platIdStr+‘/‘+processNode,
??????????????success:function(data){
????????????if(data == ‘0‘){
????????????$FN.alert(‘<span style="color:red;float:left; padding:30px 245px;">下发成功!</span>‘);
????????????showProcess(infoId);
}else if(data == ‘1‘){
????????$FN.alert(‘<span style="color:red;float:left; padding:30px 245px;">下发失败!</span>‘);
????}
???????????$(‘#strategyAlertId‘).fadeOut(‘slow‘);
??????????????},
??????????????error:function(){
??????????????$(‘#strategyAlertId‘).fadeOut(‘slow‘);
??????????????$FN.alert(‘<span style="color:red;float:left; padding:30px 245px;">处理失败!</span>‘);
??????????????}
???});
});
JS和JSF的文字前勾选框加弹出框
原文地址：http://www.cnblogs.com/xiaogongzhustudy/p/7488555.html