I have a table
with a button
in each row and the last td
has a ul
with a different numbers of li
. There is also a form
with a different count of checkboxes
.
What I need is a jQuery function that, when i click on this button
in this tr
, checks the data
attribute value in the li
and, if it's equal to the value of the checkbox/s, it will make it checked.
$(function() {
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container my-5">
<div class="row">
<div class="col-4">
<h2>Mark your checkboxes</h2>
<form id="editForm">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="1" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
checkbox 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="2" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
checkbox 2
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="3" id="defaultCheck3">
<label class="form-check-label" for="defaultCheck3">
checkbox 3
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="4" id="defaultCheck4">
<label class="form-check-label" for="defaultCheck4">
checkbox 4
</label>
</div>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
<div class="col-8">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Options</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> <a href="#" class="btn btn-primary editBtn">edit</a></th>
<td>Mark</td>
<td>Otto</td>
<td class="optList">
<ul class="list-group">
<li class="list-group-item" data-val="1">1 - Cras justo odio</li>
<li class="list-group-item" data-val="2">2 - Dapibus ac facilisis in</li>
</ul>
</td>
</tr>
<tr>
<th scope="row"> <a href="#" class="btn btn-primary editBtn">edit</a></th>
<td>Jacob</td>
<td>Thornton</td>
<td class="optList">
<ul class="list-group">
<li class="list-group-item" data-val="3">3 - Morbi leo risus</li>
<li class="list-group-item" data-val="4">4 - Porta ac consectetur ac</li>
</ul>
</td>
</tr>
<tr>
<th scope="row"> <a href="#" class="btn btn-primary editBtn">edit</a></th>
<td>Larry</td>
<td>the Bird</td>
<td class="optList">
<ul class="list-group">
<li class="list-group-item" data-val="1">1 - Cras justo odio</li>
</ul>
</td>
</tr>
<tr>
<th scope="row">
<a href="#" class="btn btn-primary editBtn">edit</a>
</th>
<td>Larry</td>
<td>the Bird</td>
<td class="optList">
<ul class="list-group">
<li class="list-group-item" data-val="4">4 - Cras justo odio</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire