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

Question

我有一个表格，每行都有一个按钮，最后一个 td 有一个 ul 和不同数量的 li 。还有一个带有不同数量的复选框的表单。

我需要的是一个 jQuery 函数，当我点击这个tr中的这个按钮时，检查 li 中的 data 属性值，如果它等于复选框的值，它将对其进行检查。

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

所以你想要做的就是进入 list-group-items 然后你想要获取所有复选框，然后将每个 list-group-item 与每个复选框进行比较，看看它是否与你想要设置的匹配它的属性已检查为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>