我尝试创建一个按钮,将选中n复选框,其中n
被定义为按钮data-num="2"
中的数据属性。我看到一个类似的问题here,我尝试使用jQuery解决方案,但它不工作。
我错过了什么?我做了什么:
1.首先,所有输入均未选中。
1.单击按钮时,我读取其数据属性。
1.然后,我尝试达到输入(类型复选框)不是所有的,但那些是在这个按钮下。
1.使用slice
检查这些输入
var selectFirst = 0;
$('.selectFirstN').on('click', function() {
selectFirst = $(this).data('num');
console.log("Here selectFirstN = " + selectFirst);
$(this).parent('.search-inputs').find('.checkboxfind').slice(0, selectFirst).prop("checked", true);
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row mb-4 selectBtns">
<div class="col-md-10 col-12 search-inputs">
<div class="row justify-content-around">
<div class="col">
<p class="font-weight-bold mb-0">Title - 01</p>
</div>
<div class="col">
<button class="btn btn-dark float-right selectFirstN" data-num="2">Select</button>
</div>
</div>
<label id="PO-04419_1" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
<input type="checkbox" name="mesId" class="checkboxfind" value="1">
<span>PO-04419_1</span>
</label>
<label id="PO-04419_2" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
<input type="checkbox" name="mesId" class="checkboxfind" value="2">
<span>PO-04419_2</span>
</label>
<label id="PO-04419_3" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
<input type="checkbox" name="mesId" class="checkboxfind" value="3">
<span>PO-04419_3</span>
</label>
<label id="PO-04419_4" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
<input type="checkbox" name="mesId" class="checkboxfind" value="4">
<span>PO-04419_4</span>
</label>
</div>
</div>
<div class="row mb-4 selectBtns">
<div class="col-md-10 col-12 search-inputs">
<div class="row justify-content-around">
<div class="col">
<p class="font-weight-bold mb-0">Title - 02</p>
</div>
<div class="col">
<button class="btn btn-dark float-right selectFirstN" data-num="3">Select</button>
</div>
</div>
<label id="PO-04419_1" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
<input type="checkbox" name="mesId" class="checkboxfind" value="1">
<span>PO-04420_1</span>
</label>
<label id="PO-04419_2" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
<input type="checkbox" name="mesId" class="checkboxfind" value="2">
<span>PO-04420_2</span>
</label>
<label id="PO-04420_3" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
<input type="checkbox" name="mesId" class="checkboxfind" value="3">
<span>PO-04419_3</span>
</label>
<label id="PO-04420_4" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
<input type="checkbox" name="mesId" class="checkboxfind" value="4">
<span>PO-04419_4</span>
</label>
</div>
</div>
1条答案
按热度按时间mspsb9vt1#
选择父/祖先时出现问题
使用
parents
或closest
代替parent
Check here