打开/关闭输入无线电

Question

我解释了我的问题，我有一个用于删除类别的叠加层。我添加了一个操作，让您在删除作业类别时选择去哪里。

为此，我使用复选框，并在复选框单击时添加一个javascript函数“打开”表单，
这是一个关闭的例子：

这是一个打开的例子框：

我的HTML代码：

  <form method="get">
    <input type="radio" name="cat_action" value="delete" /> Delete all tracks<br />
    <input type="radio" name="cat_action" value="move" onclick="showMe('div_<?php echo $value->ID ?>', this)" /> Move tracks<br />

    <div id="div_<?php echo $value->ID ?>" style="display:none">
    <label for="track">Move tracks to: </label>
    <select id="cate" name="cate">
    <?php foreach (arrayToObject($startup->getCat()) as $value) { ?>
      <option value="<?php echo $value->ID ?>"><?php echo $value->post_title ?></option>
    <?php } ?>  
    </select> <br />        
    </div><br />    

    <button type="submit"> OK </button>
    <button type="button" class="close"> Cancel </button>
  </form>

我的javascript代码：

<script type="text/javascript">
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
</script>

我的问题：
当复选框打开列表时，单击第一个复选框时它不会关闭 我只想创建一个关闭第二个复选框的函数。

您可以在此处试用：http://jsbin.com/usituv/3/edit

Answer 1

问题是由于您没有对“删除”选项选项执行任何操作 - 仅适用于“移动”选项。以下是我更新您的脚本以正常工作的方式（前提是我了解您的目标）。特别注意这些变化：

• 将id属性添加到移动单选按钮
• 将onclick处理程序添加到 delete 单选按钮
• 更改javascript函数以仅接受一个参数
• 使用getElementById函数检索javascript函数内 move 单选按钮的引用。

另请注意，最好将所有javascript分成单独的文件，包括分配onclick处理程序。但是我只是在这里解决你的问题。

<form method="get">
    <input type="radio" name="cat_action" value="delete"
           onclick="showMe('div_1')"/> Delete all tracks<br />
    <input type="radio" name="cat_action" value="move"
           onclick="showMe('div_1')" id="move"/> Move tracks<br />

    <div id="div_1" style="display:none">
        <label for="paypal">Move tracks to: </label>
        <select id="cate" name="cate">
            <option value="dubstep">Dubstep</option>
            <option value="breakbeat">Breakbeat</option>
            <option value="dnb">D'n'B</option>
        </select> 
    </div>

    <br />

    <button type="submit"> OK </button>
    <button type="button" class="close"> Cancel </button>
</form>

<script type="text/javascript">
    function showMe (it) {
        var box = document.getElementById("move");
        var vis = (box.checked) ? "block" : "none";
        document.getElementById(it).style.display = vis;
    }
</script>