如果选中了 2 个特定复选框，则显示 DIV，如果仅选中一个则显示不同的 DIV答案

【问题标题】：Show DIV if 2 specific Checkboxes are checked, if only one checked show different DIV如果选中了 2 个特定复选框，则显示 DIV，如果仅选中一个则显示不同的 DIV
【发布时间】：2011-06-20 19:23:17
【问题描述】：

我想要实现的是一种在选中 2 个复选框时显示 div 并在仅选中一个复选框时显示其他内容的方法，如果选中 3 个复选框，则再次显示不同的 div。我正在尝试使用它的工作版本....有什么帮助吗？

看看这个例子： http://jsfiddle.net/downloadtaky/FpF7T/

【问题讨论】：

标签： javascript html checkbox show-hide

【解决方案1】：

将标记更改为

<table>
    <tr>
    <td><input type="checkbox" name="opzioni" data-grp="vano1gop1" value="van ass obb 1g op1" class="opzioni" />Opzione 1</td>
    <td><input type="checkbox" name="opzioni" data-grp="vano1gop2,vano1gop3" value="van ass obb 1g op1" class="opzioni" />Opzione 2</td>
    <td><input type="checkbox" name="opzioni" data-grp="vano1gop4" value="van ass obb 1g op1" class="opzioni" />Opzione 3</td>
    </tr>
</table>
<div id="vano1gop1" class="vano1grp">Hai scelto l'opzione 1</div>
<div id="vano1gop2" class="vano1grp">Hai scelto l'opzione 2</div>
<div id="vano1gop3" class="vano1grp">Hai scelto l'opzione 3</div>
<div id="vano1gop4" class="vano1grp">Hai scelto l'opzione 4</div>

然后使用下面的JS

$(function(){
    $('.opzioni').click(function(){
        var checked = $(this).attr("checked");
        var grps = $(this).data("grp").split(",");
        $.each(grps, function(i, value){
            var elem = $("#" + value);
            checked ? elem.show() : elem.hide();
        });
    });
});

Demo

【讨论】：

我几乎是这么想的......但不是真的，我无法让它像我想要的那样工作，你能帮我吗？在您的演示中，如果我单击 opzione 2 它会打开： Hai scelto l'opzione 2 Hai scelto l'opzione 3 但我希望它只打开 Hai scelto l'opzione 2 如果我选择 Opzione 1 和 Opzione 2 我想打开：Hai scelto l'opzione 4 如果 Opzione 1 和 Opzione 3 已选中：显示：Hai scelto l'opzione 5 如果 Opzione 2 和 Opzione 3 已选中：显示：Hai scelto l'opzione 6 使用 cmets 的任何可能解决方案，以便我理解:-)
将 data-grp="vano1gop2,vano1gop3" 更改为在选中该特定复选框时要打开的以逗号分隔的项目列表。所以在演示中，第二个复选框打开 vano1gop2 和 vano1gop3。

【解决方案2】：

function toggleContent(){
    document.getElementById('divOne').style.display = 
    document.getElementById('divTwo').style.display = 'none';
    if(document.getElementById('firstCheckbox').checked && 
    document.getElementById('secondCheckbox').checked){
            document.getElementById('divOne').style.display = 
            document.getElementById('divTwo').style.display'';
    }
    else if(document.getElementById('firstCheckbox').checked){
        document.getElementById('divOne').style.display = '';
    }
}

这应该让您很好地了解这是如何完成的。尝试使用http://jquery.com/ 进行简单的隐藏/显示，非常简单。

【讨论】：