javascript - 打开/关闭输入 radio

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>