samedi 14 mars 2020

How to make check box checked if equal data attribute value of list item?

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>

View on CodePen




Aucun commentaire:

Enregistrer un commentaire