js实现全选单选的添加并添加和删除选择的元素

记录在此~方便自己后面做相似的功能直接有的找

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
<link rel="stylesheet" href="static/ace/css/chosen.css" />
<link rel="stylesheet" href="static/css/select2.min.css" />
<%@ include file="../../system/index/top.jsp"%>
<style type="text/css">
	.div-position{
		float: left;
	}
	.form-position{
		float: left;
	}
	ul{
		list-style: none;
	}
	.selectdOld li{
		float: left;
		width: 100px;
		height:25px;
		line-height:20px;
		background-color: #f7f7f7;
		padding:4px;
		margin-top: 8px;
		margin-right: 8px;
		position:relative;
	}
	.delOld{
		cursor: pointer;
		font-weight: bold;
		position: absolute;
		right:6px; 
	}
	.delOld:HOVER {
		color: red;
}
</style>
</head>
<body class="no-skin">
<div class="main-container" id="main-container">
	<div class="main-content">
		<div class="main-content-inner">
			<div class="page-content">
				<div class="row">
					<div class="col-xs-12">
					<form action="spotCheck/update.do" name="form" id="form" method="post">
						<input type="hidden" name="sId" value="${pd.sId }" />
						<input type="hidden" name="cmCode" value="${pd.cmCode }" />
						 <input type="hidden" id="status" name="status" value="${pd.status}" />
						<div id="zhongxin" style="padding-top: 13px;">
							<table id="table_report" class="table table-striped table-bordered table-hover" style="width: 97%;">
							<tr>
								<td style="width:100px;text-align: right;padding-top: 13px;">计划抽查日期:</td>
								<td>
									<div class="div-position">
										<input class="date-picker" name="startDate" id="startDate" value="${pd.startDate }" type="text" data-date-format="yyyy-mm-dd" readonly="readonly" style="width: 80%;" placeholder="日期" title="日期"/>
										<i class=" fa fa-pencil bigger-110 nav-search-icon light-grey form-i-position"></i><span class="red">*</span>
									</div>
									<div class="div-position" style="width: 50px">至</div>
									<div class="div-position">
										<input class="date-picker" name="endDate" id="endDate" value="${pd.endDate }" type="text" data-date-format="yyyy-mm-dd" readonly="readonly" style="width: 80%;" placeholder="日期" title="日期"/>
										<i class=" fa fa-pencil bigger-110 nav-search-icon light-grey form-i-position"></i><span class="red">*</span>
									</div>
								</td>
							</tr>
							<tr>
                                <td style="width:100px;text-align: right;padding-top: 13px;">核验人员:</td>
                                <td>
                                    <div class=" form-div-position">
                                        <input name="sPerson" id="sPerson" value="${pd.sPerson}" style="width: 85%;" placeholder="核验人员" />
                                        <i class=" fa fa-pencil bigger-110 nav-search-icon light-grey form-i-position"></i><span class="red">*</span>
                                    </div>
                                </td>
                            </tr>
							</table>
							<div style="width: 100%">
							<div><h3>选择抽查对象  </h3> <a onclick="getCheckOld();" style="margin-left: 12px;font-size: 16px;cursor:pointer; float:right;">添加</a></div> 
								<div style="width:50%;float: left;">
									<div style="width:100%;margin: 0;">
										<table class="table table-striped table-bordered table-hover" style="margin: 0;">
											<thead class="fixedThead">
												<th style="width: 8%"><input class="parent_check" style="width:18px;height:18px;" name="checkPro2" type="checkbox"></th>
												<th style="width: 15%">老人姓名</th>
												<th style="width: 12%">性别</th>
												<th style="width: 25%">身份证号</th>
												<th style="width: 15%">人员属性</th>
												<th style="width: 25%">护理类型</th>
												<th style=""></th>
											 </thead>
										</table>
									</div>
									<div style="width:100%;overflow: auto; max-height: 400px;"  class="dataBox">
										<table class="table table-striped table-bordered table-hover" style="">
												<c:forEach items="${oldmanList }" var="item">
													<tr>
														<td style="width: 8%"><input class="son_check" style="width:18px;height:18px;" name="checkPro" value="${item.odId },${item.odName }" type="checkbox"></td>
														<td style="width: 15%">${item.odName }</td>
														<td style="width: 12%">
															<c:if test="${item.odSex==0 }">女</c:if>
															<c:if test="${item.odSex==1 }">男</c:if>
														</td>
														<td style="width: 25%">${item.odIdCard }</td>
														<td style="width: 15%">
															<c:if test="${item.odHelp==0 }">普通</c:if>
															<c:if test="${item.odHelp==1 }">优抚</c:if>
															<c:if test="${item.odHelp==2 }">低保</c:if>
															<c:if test="${item.odHelp==3 }">底边</c:if>
															<c:if test="${item.odHelp==4 }">五保</c:if>
														</td>
														<td style="width: 25%">
															<c:if test="${item.odType==0 }">半失能失智</c:if>
															<c:if test="${item.odType==1 }">全失能失智</c:if>
															<c:if test="${item.odType==2 }">自理</c:if>
														</td>
													</tr>
												</c:forEach>
										</table>
									</div>
								</div>
								<div style="width: 250;float: left;margin-left: 22px;">
									<h3>已选择的抽查老人</h3>			
									<div style="height: 300px;width: 400px;border: 1px solid black; overflow: auto;" > 
										<ul class="selectdOld" id="selectdOld">
										<c:forEach items="${oldmanList }" var="item">
											<c:forEach items="${oldmanListSave }" var="odId" >
												<c:if test="${item.odId eq odId}" ><li>${item.odName }<span class='delOld' onclick='delOldman(this,${item.odId})'>X</span></li></c:if>
											</c:forEach>
										</c:forEach>
<!-- 											<li>张三 <span class="delOld">X</span></li> -->	
									</ul>
									</div>						
								</div>
							</div>
							<!-- <div class="alert alert-info">
								<button type="button" class="close" data-dismiss="alert"><i class="ace-icon fa fa-times"></i></button>
								<strong>提示!</strong>
								<br />
							</div> -->
							 <div class="navbar navbar-inverse navbar-fixed-bottom" style="opacity:0.95;text-align:center;padding-top:10px;background-color:#F9F9F9;border:1px solid grey;border-top-right-radius: 15px;">
                                <a class="btn btn-mini btn-success final" data-val="1">提交审核</a>
                                <a class="btn btn-mini btn-success temp" data-val="0">暂存为草稿</a>
                                <a class="btn btn-mini btn-danger" onclick="top.Dialog.close();">取消</a>
                            </div>  
						</div>
						<div id="zhongxin2" class="center" style="display:none"><br/><br/><br/><br/><br/><img src="static/images/jiazai.gif" /><br/><h4 class="lighter block green">提交中...</h4></div>
					</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<%@ include file="../../system/index/foot.jsp"%>
<script src="static/js/select2.min.js"></script>
<script src="static/ace/js/date-time/bootstrap-datepicker.js"></script>
<script type="text/javascript">
	var oldmanListSave = [];
	if('${odIdList}'!=null && '${odIdList}' !=''&&'${odIdList}'!=undefined){
		oldmanListSave = JSON.parse('${odIdList}');
	}
	 //全局的checkbox选中和未选中的样式
    $parentChexbox = $('.parent_check'), //全选
    $dataBox = $('.dataBox'),            //用于判断全局与子类的关系
    $sonCheckBox = $('.son_check');      //单个子类选中
	
	var selectOldListId = [];
	for(var i=0;i<oldmanListSave.length;i++){
		selectOldListId.push(oldmanListSave[i]);
	}
	console.log(selectOldListId)
	//全局全选与单个的关系
    $parentChexbox.click(function () {
        var $checkboxs = $dataBox.find('input[type="checkbox"]');
        if ($(this).is(':checked')) {
            $checkboxs.prop("checked", true);
        } else {
            $checkboxs.prop("checked", false);
        }
    });
	
	 $sonCheckBox.each(function () {
        $(this).click(function () {
            if ($(this).is(':checked')) {
                //判断:所有单个是否勾选
                var len = $sonCheckBox.length;
                var num = 0;
                $sonCheckBox.each(function () {
                    if ($(this).is(':checked')) {
                        num++;
                    }
                });
                if (num == len) {
                    $parentChexbox.prop("checked", true);
                }
            } else {
                //单个取消勾选,全局全选取消勾选
                $parentChexbox.prop("checked", false);
            }
        })
    })
	
	function getCheckOld(){
		 var $checkboxs = $dataBox.find('input[type="checkbox"]');
		$("input[name='checkPro']:checked").each(function(i){
			var idval =  $(this).val();
			var idvalArry= new Array(); //定义一数组
			idvalArry=idval.split(","); //字符分割
			var id = idvalArry[0];
			var name = idvalArry[1];
			if(contains(selectOldListId, id)){
				alert("'"+name+"'已添加,请勿重复添加");
				return;
			}
			selectOldListId.push(id);
			$("#selectdOld").append("<li>"+name+"<span class='delOld' onclick='delOldman(this,\""+id+"\")'>X</span></li>");
		})
		 $checkboxs.prop("checked", false);
		 $parentChexbox.prop("checked", false);
		 console.log(selectOldListId);
	}
	
	function delOldman(obj,id){
		var index = selectOldListId.indexOf(id); 
		console.log(index);
		if (index > -1) { 
			selectOldListId.splice(index, 1); 
		} 
		
		$(obj).parent().remove();
	}
	
	function contains(arr, obj) {  
	    var i = arr.length;  
	    while (i--) {  
	        if (arr[i] === obj) {  
	            return true;  
	        }  
	    }  
	    return false;  
	}
	
$(function(){
	$(top.hangge());
		
	$('.navbar-fixed-bottom').css("width", $(window).width() / 3).css("margin-left", $(window).width() / 3);
	$('caption').text($('.dialog_title', window.parent.document).find('span:first').text());
	$('.chosen-select').chosen({allow_single_deselect:true, no_results_text: "没有搜索到:"});
	$('.date-picker').datepicker({autoclose: true,todayHighlight: true});

	$('.nursingItem').select2({
        tags: false,
        placeholder : "请选择抽查对象",
    });

	$("#form").validate({
	   onfocusout:function(element) { 
		   $(element).valid(); 
		},
	   rules:{
	       sPerson:{
	    	   required: true
	       }
	   },
	   messages:{
	       sPerson:{
	    	   required: "请输入核验人员姓名!"
	       }
	   },
	   errorPlacement: function(error, element) {
		    element.removeClass("check-validate-border").addClass("error-validate-border");
		    
		    var text = error.text();
		    $(element).next('i').attr("class","fa fa-warning bigger-110 nav-search-icon red2 form-i-position");
		    if(text != ""){
			     $(element).tips({
				      side:3,
				      msg:text,
				      bg:'#AE81FF',
				      time:3
			     });
		    }
	  },
	   success:function(error, element){
	   		$('#'+element.id).removeClass("error-validate-border").addClass("check-validate-border");
	   		$('#'+element.id).next('i').attr("class","fa fa-check bigger-110 nav-search-icon green form-i-position");
	   }
	  });
	
	
	$('.btn-success').on('click', function(){
		$('.btn').attr("disabled", "disabled");
		if($('#form').valid()){
			if (selectOldListId.length == 0){
			  	Alert("请选择抽查对象",3000);
				$('.btn').removeAttr("disabled");
				return;
			}
		    var endTime = $('#endDate').val();
            var startTime = $('#startDate').val();
			if(startTime==null||startTime==''){
				Alert("开始时间未填写",3000);
				$('.btn').removeAttr("disabled");
				return;
			}
            if(endTime==null||endTime==''){
                Alert("结束时间未填写",3000);
				$('.btn').removeAttr("disabled");
                return;
            }

            if(endTime<=startTime){
                Alert("结束时间不能在开始时间前",3000);
				$('.btn').removeAttr("disabled");
                return;
            }
            var value = $(this).data('val');
			$.ajax({
				type: 'post',
				url: $('#form').attr('action'),
				data: $('#form').serialize()+"&status="+value+ '&odId=' + selectOldListId,
				dataType: 'json',
				success: function(data){
					prompt(data, function(){
						top.Dialog.close();
					});
				}
			});
		}else{
			$('.btn').removeAttr("disabled");
		}
	});

});
</script>
</body>
</html>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值