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

【问题标题】：Jquery show div if ANY of checkboxes with same target is checked, otherwise hide the div如果选中任何具有相同目标的复选框，则 Jquery 显示 div，否则隐藏 div
【发布时间】：2015-01-07 07:28:48
【问题描述】：

我有一个带有复选框的表单，每个复选框都有“数据目标”属性来选择一个隐藏的 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();
});

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

【问题讨论】：

标签： javascript jquery checkbox

【解决方案1】：

您可以使用当前选中的复选框属性data-target来查找是否有任何其他具有相同属性的复选框在if条件下被选中：

$('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

【讨论】：

谢谢！正是我想要的。我认为这就像重写那个条件一样简单，只是没有编写那个选择器的技能。

【解决方案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();
        });

    });
});

【讨论】：

@teeraina - 查看链接 - 运行良好！