【发布时间】：2020-03-14 07:19:30
【问题描述】：
我有一个 table，每行都有一个 button，最后一个 td 有一个 @ 987654326@ 与不同的号码 li 。还有一个 form 与 checkboxes 的计数不同。
我需要的是一个 jQuery 函数，当我点击这个 tr 中的这个 button 时，会检查 data 属性值 在 li 中，如果它等于 checkbox/s 的值，它将使其选中。
$(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>【问题讨论】：
-
您可能想尝试一下，然后向我们展示您尝试了什么以及具体出了什么问题。这可以帮助我们直观地了解您正在尝试做的事情，而且看到一些努力总是很高兴。
-
@showdev 我真的对它做了很多不同的技术，我从 3 天前开始研究它，但我没有得到任何结果现在我用最后一种方法更新了 codepin 中的 jquery 代码有所以请看一下
-
我已将您更新的代码添加到您的问题中。见why/how to make a stack snippet。
标签： javascript jquery html checkbox bootstrap-4