1

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

为此，我使用复选框，并在单击复选框时添加一个 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

4

1 回答 1

1

问题是由于您在“删除”选项选择上没有做任何事情 - 仅在“移动”选择上。以下是我如何更新您的脚本以使其正常工作（前提是我了解您的需求）。特别注意变化：

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

另请注意，最好将所有 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>
于 2012-09-06T08:15:10.220 回答