I have a jQuery script that unchecks checkboxes in form inputs. I'm trying to make it work so it only affects the specific list item it's in, but I've been unsuccessful so far.
$(document).ready(function() {
$(".check").click(function() {
$(".myCheck").prop("checked", true);
});
$(".uncheck").click(function() {
$(".myCheck").prop("checked", false);
});
});.appslist {
list-style: none;
padding: 0%;
display: block;
height: 90%;
}
.appslist li {
display: block;
width: 18.33%;
padding-left: 5.356%;
padding-right: 5.356%;
margin: 0%;
float: left;
max-height: 100%;
}
.ecard {
height: 100%;
}
.log {
height: 85%;
}
.logheader {
height: 15%;
}
.resetbutton {
float: left;
height: 100%;
width: 20%;
}
.logheader {
text-align: center;
border-bottom: 2px solid black;
border: 5px solid black;
display: flex;
justify-content: space-between;
align-content: center;
}
.logheader h1 {
margin: 0%;
font-size: 1.5vw;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul class="appslist">
<li>
<div class="ecard">
<div class="logheader">
<h1>Div1</h1>
<button type="button" class="uncheck resetbutton"></button>
</div>
<div class="log">
<form>
<div class="setinput">
<h6>
<input type="checkbox" class="myCheck">20</input> Set 1 </h6>
</div>
</form>
</div>
</div>
</li>
<li>
<div class="ecard">
<div class="logheader">
<h1>Div2</h1>
</div>
<div class="log">
<form>
<div class="setinput">
<h6><input type="checkbox" class="myCheck"> 20</input> Set 1 </h6>
</div>
</form>
</div>
</div>
</li>