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

AmrAtef
March 14, 2020
207 views
3 votes
3 Answers

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

Answers

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:

Find the row containing the clicked element by using jQuery’s closest().
Find the .list-group-item elements inside that row by using selector context or find().
Build an array of the data-val values by using map() to return the value of each element’s data-val attribute.
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

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>

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/[email protected]/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>

Please signup or login to give your own answer.

Click here to cancel reply.