打开/关闭输入收音机

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 处理程序添加到删除单选按钮
• 将 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>