代码之家  ›  专栏  ›  技术社区  ›  Julien

打开/关闭输入收音机

  •  1
  • Julien  · 技术社区  · 14 年前

    我解释了我的问题,我有一个覆盖,我用来删除类别。我添加了一个操作,让您选择删除工作类别时的去向。

    为此,我使用了checkbox,并添加了一个javascript函数,当点击复选框时“打开”表单,
    以下是关闭方框的示例:

    First box

    以下是打开的示例框:

    second box

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

    1 回复  |  直到 4 年前
        1
  •  1
  •   Aleks G    14 年前

    这个问题是由于你在“删除”选项选择上什么都不做——只在“移动”选项上做。以下是我如何更新您的脚本以使其正常工作(前提是我了解您的要求)。特别注意这些变化:

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

    还要注意,最好将所有javascript分离到一个单独的文件中,包括将 一次性的 处理程序。然而,我只是在这里解决你手头的问题。

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