幾個小時以來我一直試圖解決這個問題,但我只是不明白我做錯了什么。單擊子復選框時,我試圖獲取某個類的父復選框。
HTML:
<div class="accordion" id="accordionExample">
<div >
<div id="heading6">
<input type="checkbox" id="program6" value="6" checked="">
<a type="button" data-bs-toggle="collapse" data-bs-target="#collapse6" aria-expanded="true" aria-controls="collapse6">Maine Ecological Reserves Program</a>
</div>
</div>
<div id="collapse6" style="margin-left:24px;" aria-labelledby="heading6" data-bs-parent="#accordionExample">
<div >
<input type="checkbox" id="package243" value="program_data/6/packages/1646756076.zip" checked="">
<label for="package243">1646756076.zip</label>
</div>
<div >
<input type="checkbox" id="scriptundefined" value="program_data/6/scripts/MEER_munger.py" checked="">
<label for="scriptundefined">MEER_munger.py</label>
</div>
</div>
<div >
<div id="heading9">
<input type="checkbox" id="program9" value="9">
<a type="button" data-bs-toggle="collapse" data-bs-target="#collapse9" aria-expanded="true" aria-controls="collapse9">Vermont State Lands Continuous Forest Inventory</a>
</div>
</div>
<div id="collapse9" style="margin-left:24px;" aria-labelledby="heading9" data-bs-parent="#accordionExample">No files for this project
</div>
</div>
jQuery:
$(document).on('click', '.file_checkbox', function(){
if($(".file_checkbox:checked").length < $(".file_checkbox").length) {
console.log($(this).parent().parent().prevAll('.program_checkbox'));
}
});
我已經嘗試了很多 parent/prev/next/sibling 的組合,我失去了理智,由于某種原因,我無法進入以前的 .program_checkbox 取消選中它......
我錯過了什么?謝謝!
uj5u.com熱心網友回復:
- 使用復選框
change代替click parent()選擇上一級prev()同一級別的前一個元素prevAll()也在同一級別
$(this).parent().parent()到達vertical-align: inherit;">元素后,您需要使用到達prev()上一個元素,accordion-item然后使用find('.program-checkbox')選擇所需的元素
parent().parent()...此外,您只能使用,而不是重復.closest()
- 請參閱下一個示例
$(document).on('change', '.program_checkbox', function(){
$(this).closest('.accordion-item').next().find('.file_checkbox').prop("checked" , this.checked);
});
$(document).on('change', '.file_checkbox', function(){
let file_checked = $(this).closest(".accordion-collapse").find(".file_checkbox:checked").length,
program_checkbox = $(this).closest(".accordion-collapse").prev().find('.program_checkbox');
if(file_checked) {
program_checkbox.prop("checked" , true);
}else{
program_checkbox.prop("checked" , false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<div class="accordion-header" id="heading6">
<input type="checkbox" class="form-check-input program_checkbox" id="program6" value="6" checked="">
<a class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse6" aria-expanded="true" aria-controls="collapse6">Maine Ecological Reserves Program</a>
</div>
</div>
<div id="collapse6" style="margin-left:24px;" class="accordion-collapse collapse show ml-4" aria-labelledby="heading6" data-bs-parent="#accordionExample">
<div class="form-group form-check pl-4">
<input type="checkbox" class="form-check-input file_checkbox program6" id="package243" value="program_data/6/packages/1646756076.zip" checked="">
<label class="form-check-label" for="package243">1646756076.zip</label>
</div>
<div class="form-group form-check pl-4">
<input type="checkbox" class="form-check-input file_checkbox program6" id="scriptundefined" value="program_data/6/scripts/MEER_munger.py" checked="">
<label class="form-check-label" for="scriptundefined">MEER_munger.py</label>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" id="heading9">
<input type="checkbox" class="form-check-input program_checkbox" id="program9" value="9">
<a class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse9" aria-expanded="true" aria-controls="collapse9">Vermont State Lands Continuous Forest Inventory</a>
</div>
</div>
<div id="collapse9" style="margin-left:24px;" class="accordion-collapse collapse show ml-4" aria-labelledby="heading9" data-bs-parent="#accordionExample">No files for this project
</div>
</div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/445226.html
