1

私の問題を説明しました。カテゴリを削除するために使用したオーバーレイがあります。ジョブ カテゴリが削除されるときに、どこに移動するかを選択できるアクションを追加します。

このために、チェックボックスを使用し、チェックボックスがクリックされたときにフォームを「開く」javascript関数を追加します。これ
は、ボックスを閉じる例です。

最初のボックス

開いたボックスの例を次に示します。

2 番目のボックス

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

私の問題：
チェックボックスがリストを開くと、最初のチェックボックスをクリックしても閉じません。
2番目のチェックボックスを閉じる関数を作成したいだけです。

ここで試すことができます: http://jsbin.com/usituv/3/edit

4

1 に答える 1

1

問題は、「削除」オプションの選択では何もせず、「移動」の選択のみであるという事実によるものです。以下は、スクリプトが適切に機能するように更新した方法です (ただし、目的を理解している場合)。特に変更点に注意してください。

  • 移動ラジオボタンidに属性を追加する
  • 削除ラジオボタンonclickへのハンドラの追加
  • パラメータを 1 つだけ受け入れるように JavaScript 関数を変更する
  • 関数を使用して、javascript 関数内の移動ラジオ ボタンgetElementByIdへの参照を取得します。

onclickまた、ハンドラーの割り当てを含め、すべての 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>
于 2012-09-06T08:15:10.220 に答える