树形视图中的复选框功能

时间：2019-11-26 05:01:14

标签： jquery html css function checkbox

https://codepen.io/chriscoyier/pen/JYyXjX 我想在代码中添加这种类型的复选框功能[https://codepen.io/mitvazatakiya/pen/XWWOOqG]。 [尝试解决没有插件的问题。 它从最后一个孩子到授予父母的工作。  -当我检查父母时，应该选择所有孩子。  -当我取消选中一个孩子时，父母也取消选中。  -当我检查所有孩子的父母时，都会自动选择。] 您可以在上述Codepen链接中看到所有功能。

$(document).ready(function(){

	var id = 0;
	var idnew = 0;
	var idSub = 0;
	var chkBoxId = 0; 
	
	var parentdiv = $("<ul class='parentdiv'></ul>");
	$(".main").append(parentdiv); 
	$(".icon .mAddClick").click(function(){

		idnew++;  		
		var $maindiv = $("<li id='idnew"+idnew+"' class='flW100'><input id ='chkBoxId"+idnew+"' type='checkbox' class='chkBoxCls'><input type='text' class='inputCls'><a  class='rightBtn'><i class='fas fa-check'></i></a> <p class='lableTxt'></p>   <div class='edtDelBody'> <a class='deleteBtn'><i class='fas fa-times'></i></a>  <a class='editBtn'><i class='fas fa-pen'></i></a><a  class='addSubDivBtn'><i class='fas fa-plus'></i></a>  </div> </li>");
		$(parentdiv).append($maindiv);
		$('input[type=text]').focus();

		$("input[type=text]").keypress(function(event) { 
			if (event.keyCode === 13) { 
				$(".rightBtn").click(); 
			} 
		});
	});

	$(".mdeleteClick").on("click",function(){      
		$("input:checked").parent().parent().remove();
		$(".icon1 .mdeleteClick").hide();
	});
	
	$("body").on("click",".rightBtn",function(){	 
		var inputval = $(this).siblings('.inputCls').val();
		if (inputval == ''){
			alert("please enter your task");
			
		}else{
			$(this).siblings('.lableTxt').show();
			$(this).siblings('.lableTxt').text(inputval);
			$(this).siblings('.inputCls').hide(); 		
			$(this).hide();
			$(this).siblings('.edtDelBody').show();				
		}
	});  

	$("body").on("click",".deleteBtn",function(){
		$(this).parent().parent().parent().remove();
	}); 	

	$("body").on("click",".editBtn",function(){
		$(this).parent('.edtDelBody').hide();	
		$(this).parent().siblings('.lableTxt').hide();
		$(this).parent().siblings('.inputCls').show();	
		$(this).parent().siblings('.inputCls').focus();
		$(this).parent().siblings('.rightBtn').show();		 
	}); 	 

	$("body").on("click",".addSubDivBtn",function(){		  
		idSub++;
		var subdiv1 = $("<ul class='subsec'></ul>");
		$(this).parent('.edtDelBody').parent($(".flW100")).append(subdiv1);     
		var $subdiv = $("<li class='subdiv'><input id ='chkBoxId"+idnew+"' type='checkbox' class='chkBoxCls'><input type='text' class='subinputcls inputCls'> <a  class='rightBtn'><i class='fas fa-check'></i></a> <p class='lableTxt'></p>   <div class='edtDelBody'> <a class='deleteBtn'><i class='fas fa-times'></i></a>  <a class='editBtn'><i class='fas fa-pen'></i></a><a  class='addSubDivBtn'><i class='fas fa-plus'></i></a>  </div></li>");
		$(subdiv1).append($subdiv);
		$('.subinputcls').focus();

		$("input[type=text]").keypress(function(event) { 
			if (event.keyCode === 13) { 
				$(".rightBtn").click(); 
			} 
		});
	}); 

// 	$("body").on("change",".chkBoxCls",function(e) {
// 		e.preventDefault();
// 		e.stopPropagation();
// 		$(this).each(function () {
// 			var a=$("input:checked").length;
// 			console.log(a);
// 			if(a>=2){$(".icon1 .mdeleteClick").show();}
// 			else if(a<=1){$(".icon1 .mdeleteClick").hide();}
// 		});

// 		console.log("Enter in loop");
// 		var checked = $(this).prop("checked"),
// 		container = $(this).parent(),
// 		siblings = container.parent().siblings("ul");
// 		console.log(checked);
// 		console.log(container);
// 		console.log(siblings);

// 		container.find('input[type="checkbox"]').prop({
// 			checked: checked
// 		});

// 		function checkSiblings(el) {

// 			console.log("check for condition");
// 			var parent = el.parent().parent(),
// 			all = true;
// 			console.log(parent);
// 			console.log(el);

// 			el.parent().siblings("ul").each(function() {
// 				console.log("siblings");
// 				console.log(this);
// 				var returnValue = all = ($(this).find("li").children('input[type="checkbox"]').prop("checked") === checked);
// 				return returnValue;
// 			});

// 			console.log(all);

// 			if (all && checked) {
// 				console.log("all && checked");
// 				console.log(parent);
// 				parent.children('input[type="checkbox"]').prop({
// 					checked: checked
// 				});

// 				// checkSiblings(parent);
// 				// return false;
// 				setTimeout(checkSiblings(parent), 30);

// 			} else if (all && !checked) {
// 				console.log("sdsadsadsa");
// 				parent.children('input[type="checkbox"]').prop("checked", checked);
// 				// checkSiblings(parent);
// 				// return false;
// 				setTimeout(checkSiblings(parent), 30);

// 			} else {
// 				console.log("else");
// 				console.log(el);
// 				el.parents("li").children('input[type="checkbox"]').prop({
// 					checked: false
// 				});

// 			}
// 		}
// 		checkSiblings(container);
// 	}); 	
});
* {
  box-sizing: border-box;
  user-select: none;
}

body{display: flex;
  background: #fff;
  justify-content: center;
  align-items: center;}
 ul,li{padding: 0px;margin: 0px;list-style:none;}
.content,.main,.header{width: 100%;float: left}
a:hover{text-decoration: none;}
.header{padding:10px;border-bottom:1px solid #a2a2a2;background-color:#fff;}
.main{width:50%;margin-left: 50%;transform: translateX(-50%);/*box-shadow: 0 4px 3px rgba(0,0,0,0.2);*/padding: 0 0 10px 0;}
.heading{width:auto;float: left}
.heading h4{margin:5px 0 0 0;}
.icon,.icon1{float:right;width:auto;}
.icon:hover{cursor: pointer;}
.subitem{width:100%;float:left;box-shadow: 0px 3px 4px -1px rgba(0, 0, 0, 0.15);}
.flW100{width:100%;float:left; padding:10px;background-color:#fff;margin:6px 0;border:1px solid #e0e0e0;}
.chkBoxCls{float:left;margin:14px 0 0 !important; }
.inputCls{float:left; width:50%;border-radius: 15px;border: 1px solid #b3b2b2;padding:2px 10px;margin:6px 0 0 10px;}
.inputCls:focus{outline: 0px;}
.rightBtn{float:right;padding:10px 0 0;}
.rightBtn i{font-size:18px;color: #4C6EF5;font-weight: bold;}
.rightBtn:hover{text-decoration: none;cursor: pointer;}
.edtDelBody{ display:none;}
.editBtn{float:right;margin:5px 10px; }
.deleteBtn{float:right;margin:7px 0 0 0;}
.deleteBtn:hover{cursor: pointer;}
.deleteBtn i{ color:#f15c5c;font-size:18px;font-weight:600;}
.addSubDivBtn{float:right;margin: 6px 0 0 0;}
.addSubDivBtn i{ color:#03C;font-size: 20px;font-weight: 600;}
.addSubDivBtn i:hover{cursor: pointer;}
.lableTxt{ display:none; float:left;margin:9px 0 0 10px;text-overflow: ellipsis;overflow: hidden;width:150px;white-space: nowrap;}
.editicon{width:16px;height:16px;}
.editicon:hover{cursor: pointer;}
.mdeleteClick{display: none;color: #ff0000;font-size:20px;}
.mdeleteClick:hover{cursor: pointer;}
.subdiv{float: left;width: 100%;}
.icon1{margin: 8px 8px 0 0;}
.mAddClick{font-size:20px;color:#1c23eb;font-weight:600;margin:8px 0 0 0;}
.parentdiv{float: left;width: 100%;}
.subsec{width: 100%;float: left;padding: 0 0 0 10px;}
.editBtn:hover,.deleteBtn:hover,.addSubDivBtn:hover{background-color:#f9f6f6;box-shadow: 0px 2px 2px 1px rgba(0,0,0,0.2);}
.editBtn, .deleteBtn, .addSubDivBtn {height: 30px;width: 30px;display: flex;border-radius: 50%;align-items: center;justify-content: center;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
		<div class="container">
			<div class="main">
				<div class="header">
					<span class="heading"><h4>Add New Task</h4></span><span class="icon"><i class="fas fa-plus mAddClick"></i></span><span class="icon1"><i class="far fa-trash-alt mdeleteClick"></i></span>
				</div>
			</div>
		</div>
	</div>
请尽快帮助我。 预先感谢。

0 个答案:

没有答案
相关问题
最新问题