https://codepen.io/chriscoyier/pen/JYyXjX I want to add this type of checkbox functionallity in my code. And It work from last child to it's grant parent. - When I check parent it's all child should be selected. - When I uncheck of it's one child then parent also unchecked. - When I check all child parent will auto selected. You can see all the functionallity in above codepen link.
$(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>
Aucun commentaire:
Enregistrer un commentaire