我正在使用 cmb2 taxonomy_multicheck_hierarchical字段类型以分层格式显示我的类别,但是我有很多术语,它们目前在层次结构中有 3 个级别。
如果选中了父项,我想检查所有子项,如果未选中父项,我想取消选中所有子项。
以下是我需要使用的渲染 html 的一部分:
<ul class="cmb2-checkbox-list cmb2-list">
<li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location1" value="england" data-hash="6u5db7f23u40"> <label for="supplier_location1">England</label></li>
<li class="cmb2-indented-hierarchy">
<ul>
<li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location2" value="east-midlands" data-hash="6u5db7f23u40"> <label for="supplier_location2">East Midlands</label></li>
<li class="cmb2-indented-hierarchy">
<ul>
<li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location3" value="derbyshire" data-hash="6u5db7f23u40"> <label for="supplier_location3">Derbyshire</label></li>
<li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location4" value="leicestershire" data-hash="6u5db7f23u40"> <label for="supplier_location4">Leicestershire</label></li>
<li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location5" value="lincolnshire" data-hash="6u5db7f23u40"> <label for="supplier_location5">Lincolnshire</label></li>
<li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location6" value="northhamptonshire" data-hash="6u5db7f23u40"> <label for="supplier_location6">Northhamptonshire</label></li>
<li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location7" value="rutland" data-hash="6u5db7f23u40"> <label for="supplier_location7">Rutland</label></li>
</ul>
</li>
<li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location8" value="east-of-england" data-hash="6u5db7f23u40"> <label for="supplier_location8">East of England</label></li>
<li class="cmb2-indented-hierarchy">
<ul>
<li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location9" value="bedfordshire" data-hash="6u5db7f23u40"> <label for="supplier_location9">Bedfordshire</label></li>
<li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location10" value="cambridgeshire" data-hash="6u5db7f23u40"> <label for="supplier_location10">Cambridgeshire</label></li>
<li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location11" value="essex" data-hash="6u5db7f23u40"> <label for="supplier_location11">Essex</label></li>
<li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location12" value="hertfordshire" data-hash="6u5db7f23u40"> <label for="supplier_location12">Hertfordshire</label></li>
<li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location13" value="norfolk" data-hash="6u5db7f23u40"> <label for="supplier_location13">Norfolk</label></li>
<li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location14" value="suffolk" data-hash="6u5db7f23u40"> <label for="supplier_location14">Suffolk</label></li>
</ul>
</li>
</ul>
</li>
<li><input type="checkbox" class="cmb2-option" name="supplier_location[]" id="supplier_location15" value="scotland" data-hash="6u5db7f23u40"> <label for="supplier_location15">Scotland</label></li>
</ul>
我尝试的javascript代码如下:
jQuery( document ).ready(function( $ ) {
$('#supplier_location_container input[type="checkbox"]').click(function(){
$('input[type="checkbox"]', $(this).closest('li').next()).prop( 'checked', true );
});
$('#supplier_location_container input[type="checkbox"]:checked').click(function(){
$('input[type="checkbox"]', $(this).closest('li').next()).prop( 'checked', false );
});
});
但是我的代码包含许多错误!当我再次检查父级时,它不允许我取消选中所有子框,并且当您选中层次结构的最后一层深处的任何框时,它还会在同一级别上直接选中它旁边的框!
更新:
我觉得我正在取得进步,但我还没有安静下来。我的新代码允许我检查父复选框中的所有子复选框,但是如果我尝试检查我的层次结构的最后一层内的任何复选框,它将始终选中它正下方的复选框。例如,如果您选中复选框 idsupplier_location3,它也会检查supplier_location 4!
$('#supplier_location_container input[type="checkbox"]').click(function(){
if($(this).is(':checked')){
$('input[type="checkbox"]', $(this).closest('li').next()).prop( 'checked', true );
}else{
$('input[type="checkbox"]', $(this).closest('li').next()).prop( 'checked', false );
}
});