如果选中两个特定复选框，则显示DIV;如果只选中一个复选框，显示不同的DIV

Show DIV if 2 specific Checkboxes are checked, if only one checked show different DIV

本文关键字：如果 显示 DIV 复选框 一个 两个      更新时间：2023-09-26

我想要实现的是，如果选中2个复选框，则显示div；如果只选中一个，则显示其他内容；如果选中3个复选框则再次显示不同的div。我正在尝试一个工作版本……有什么帮助吗？

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

将标记更改为

<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();
        });
    });
});

演示

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/对于简单的隐藏/展示，非常容易。

相关文章：