数组复选框显示一个新的div

Question

I have some problems with a JavaScript code, because I show a new div if the person checked a checkbox, but if a checked another checkbox the div should disappear, but it does, here my code:

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

And this is the block of 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>

just one of the checboxes should be marked, if is checked depo checkbox open a new div with a new imput and another things, but if a cheked efe chechbox the div that appeared before should be dissapear, In short, if a checkbox should appear within a form, but if under another, should disappear.

the problem become when shows the div, if i select the other checkbox the form does not disappear

Please... I need help with this code... If you have another code that be great!

Answer 1

The solution to this is create an and a and be related in a javascript to show when the value is the same and hide when it changes

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