如果列表项的数据属性值相等，如何选中复选框？

Question

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() { var liVal = $(".optList li").data("val"), chkVal = $("form-check-input").val(); $(".editBtn").on("click", function() { e.preventDefault(); if (liVal == chkVal) { chkVal.attr("checked", "checked"); } }); });

 <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>

View on CodePen

Answer 1

You'll need to identify the data-val values that are in the same table row as the clicked element. Here's one way to accomplish it:

1. Find the row containing the clicked element by using jQuery's closest() .

2. Find the .list-group-item elements inside that row by using selector context or find() .

3. Build an array of the data-val values by using map() to return the value of each element's data-val attribute.

4. Select the checkbox elements directly by passing the array to their val() .

Here's a demonstration:

 $(function() { // define the checkbox elements let $checkboxes = $(".form-check-input"); $(".editBtn").on("click", function(e) { e.preventDefault(); // find the row of the clicked element let $row = $(this).closest("tr"); // build an array of the row's data values let liVals = $(".list-group-item", $row).map(function() { return $(this).data("val"); }).toArray(); // set the value of the checkboxes to the array of data values $checkboxes.val(liVals); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>

---

For further reference, see jQuery's selector context .

jQuery( selector [, context ] )

selector
Type: Selector
A string containing a selector expression

context
Type: Element or jQuery
A DOM Element, Document, or jQuery to use as context

Answer 2

So what you wanna do is get to list-group-items then you want to get all the Checkboxes and then compare each list-group-item with every checkbox and if it matches you wanna set it's property checked to true

 $(document).ready(function() { $(".editBtn").click(function() { var TableRow = $(this) .parent() .parent(); var OptList = TableRow.find(".optList"); var ListGroup = OptList.find(".list-group"); // List Items var ListItems = ListGroup.children(); // Inputs var CheckBoxes = document.getElementsByClassName("form-check-input"); // Check Each List Item with Every Checkbox Value $(ListItems).each(function(index) { var DataVal = $(this).attr("data-val"); $(CheckBoxes).each(function(index) { var checkboxvalue = $(this).val(); if (DataVal === checkboxvalue) { $(this).prop("checked", true); } }); }); }); }); // Event Listener to toggle Check Property $(".form-check-input").change(function() { if ($(this).is(":checked")) { $(this).prop("checked", true); } else { $(this).prop("checked", false); } });

 <!DOCTYPE html> <html lang="en"> <head> <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- Bootstrap 4 JS --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous" ></script> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" /> </head> <body> <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> </body> </html>

Answer 3

When you click on edit button then need to find parent (tr) then use find() method to get [data-val] inside (tr) then use each() method and inside each method set data-val value + checkbox value is equal(matched) then checked(true) something like below snippet.

 $(function() { // define the checkbox elements let allcheckBoxes = $(".form-check-input"); $(".editBtn").on("click", function(e) { e.preventDefault(); // Remove previous checked allcheckBoxes.prop('checked', false); // Find parent as <tr> let $row = $(this).parent().parent(); $row.find('[data-val]').each(function(i,v){ var listValues = $(this).attr('data-val'); // If list value and checkbox value matched then checked -> true $('.form-check-input[value="'+listValues+'"]').prop('checked', true); }); }); });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <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>