Jquery 如果选中任何具有相同目标的复选框，则显示 div，否则隐藏 div

Question

我有一个带有复选框的表单，每个复选框都有 'data-target' 属性 select 一个隐藏的 div 在选中时显示。

<input type="checkbox" name="group[]" class="show-div" data-target="div-1" value="1">
<input type="checkbox" name="group[]" class="show-div" data-target="div-2" value="2"> 
<input type="checkbox" name="group[]" class="show-div" data-target="div-2" value="3">
<input type="checkbox" name="group[]" class="show-div" data-target="div-2" value="4">    

<div id="div-1" class="hidden"></div>
<div id="div-2" class="hidden"></div>

javascript如下：

$('input.show-div').on('change', function() {
       var source = $(this);
       var target = $('#' + source.attr('data-target'));
       if (this.checked) target.show();
       else target.hide();
});

这显然适用于第一个复选框，或者如果 check/uncheck 只有最后三个复选框中的一个。我想要实现的是，如果任何具有相同目标 div 的复选框被选中，则显示它，否则隐藏它。

Answer 1

如果条件为：

，您可以使用当前选中的复选框属性 data-target 来查找是否选中了具有相同属性的任何其他复选框

$('input.show-div').on('change', function() {
   var source = $(this);
   var target = $('#' + source.attr('data-target'));
   if ($('input[data-target='+source.attr('data-target')+']:checked').length) target.show();
   else target.hide();
});

Working Demo

Answer 2

试试这个 Working Demo Click -Here

HTML

<input type="checkbox" name="group[]" class="show-div" data-target="div-1" value="1">
<input type="checkbox" name="group[]" class="show-div" data-target="div-2" value="2"> 
<input type="checkbox" name="group[]" class="show-div" data-target="div-3" value="3">
<input type="checkbox" name="group[]" class="show-div" data-target="div-4" value="4">    

<div id="div-1" class="divCls hidden">1</div>
<div id="div-2" class="divCls hidden">2</div>
    <div id="div-3" class="divCls hidden">3</div>
    <div id="div-4" class="divCls hidden">4</div>

JQuery

$(document).ready(function(){
    $(".divCls").hide();
    $('input.show-div').on('change', function() {
            $(".divCls").hide();
        $(".show-div:checked").each(function(){
            //alert($(this).attr('data-target'));
            $("#"+$(this).attr('data-target')).show();
        });

    });
});

Jquery 如果选中任何具有相同目标的复选框，则显示 div，否则隐藏 div

Jquery show div if ANY of checkboxes with same target is checked, otherwise hide the div

javascript

checkbox

jquery