Javascript 如果选中两个特定复选框,则显示DIV;如果仅选中一个复选框,则显示不同的DIV

Javascript 如果选中两个特定复选框,则显示DIV;如果仅选中一个复选框,则显示不同的DIV,javascript,html,checkbox,show-hide,Javascript,Html,Checkbox,Show Hide,我想要实现的是,如果选中2个复选框,则显示一个div;如果只选中一个复选框,则显示其他内容;如果选中3个复选框,则再次显示另一个div。 我正试图得到一个有效的版本。。。。有什么帮助吗 看看这个例子: 这会让你很好地了解这是如何做到的。尝试使用简单的隐藏/显示内容,非常简单。将标记更改为 <table> <tr> <td><input type="checkbox" name="opzioni" data-grp="vano1gop1"

我想要实现的是,如果选中2个复选框,则显示一个div;如果只选中一个复选框,则显示其他内容;如果选中3个复选框,则再次显示另一个div。 我正试图得到一个有效的版本。。。。有什么帮助吗

看看这个例子:

这会让你很好地了解这是如何做到的。尝试使用简单的隐藏/显示内容,非常简单。

将标记更改为

<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>

几乎是我想的……但不是真的,我不能让它像我想的那样工作,你能帮我吗?在您的演示中,如果我单击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'opzionel'opzione 6任何可能的带注释的解决方案,以便我能够理解:-将数据grp=vano1gop2,vano1gop3更改为选中特定复选框时要打开的以逗号分隔的项目列表。所以在演示中,第二个复选框打开vano1gop2和vano1gop3。
<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>
$(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();
        });
    });
});