數組復選框顯示一個新的div

Question

我的JavaScript代碼存在一些問題，因為如果此人選中了一個復選框，則顯示一個新的div，但是如果選中另一個復選框，則該div應該消失了，但確實如此，這是我的代碼：

<script type="text/javascript">
    var checkDisplay = function(check, form) { //check ID, form ID
        form = document.getElementById(form), check = document.getElementById(check);
        check.onclick = function(){
            form.style.display = (this.checked) ? "block" : "none";
            form.reset();
        };
        check.onclick();
    };
</script> 

這是HTML的塊：

<div id="Opciones">
        <p style="display: inline-block;">Efectivo</p>&nbsp;&nbsp;<input type="checkbox" value="1" id="efe" name="check"/>
        <p style="display: inline-block;">Deposito</p>&nbsp;&nbsp;<input type="checkbox" value="2" id="depo" name="check"/>
    </div>

    <div id="deposi">
        <div class="row">
             <input type="checkbox"/>
        </div>
    </div>
<script type="text/javascript">
    checkDisplay("depo", "deposi");
</script>

只是其中一個復選框應被標記，如果選中了depo復選框，則使用新的輸入和其他內容打開一個新的div，但是如果選中的是efe復選框，則應該消失之前出現的div，簡而言之，如果復選框應出現在其中一種形式，但如果在另一種形式下，則應消失。

問題出現在顯示div時，如果我選擇其他復選框，則表單不會消失

請...我需要有關此代碼的幫助...如果您還有其他很棒的代碼！

Answer 1

解決此問題的方法是在JavaScript中創建和並與之關聯，以在值相同時顯示，並在值更改時隱藏

><select name="status" id="status">
>    <option value="">pick one...</option>
>    <option value="show">show</option>
>    <option value="hide">hide</option>
></select>
><div name="razordiv" id="razordiv">Hi!</div>
><script>$(document).ready(function() {
>        $("#razondiv").hide();
>        $("#status").change(function() {
>           if ($("#status").val() == 'show') {
>               $("#razondiv").show();
>           }
>           else {
>               $("#razondiv").hide();
>           }
>        });
>     });
></script>