0

jQuery の '.live()' イベント ハンドラーを使用して単純な動的フォームを作成しています。

フォームは必要に応じて伸縮しますが、フォームの JavaScript '.reset' メソッドは部分的にしか機能しません。

明確にするために、最初の 2 つのラジオ ボタンのいずれかが (階層 1 で) 選択されている場合、reset メソッドは階層 2 オプションの選択を解除する必要がありますが、これは最初の階層 2 フォーム (tier2Foo1) でのみ機能し、2 番目のフォーム (tier2Foo2) では機能しません。 ）。

以下のコード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Build a Bin</title>
<style type="text/css">
#first {
    padding-top: 10px;
    height: 250px;
}
#hideFoo {
    padding-top: 10px;
    height: 250px;
    display: none;
}
#hideFoo2 {
    background-color: black;
    color: white;
    width: 100px;
    display: none;
}
#first, #hideFoo, #hideFoo2 {
    margin-bottom: 10px;
    width: 350px;
    border: #000 1px solid;
}
.fieldContainer {
    float: left;
    width: 150px;
    padding: 0 10px 0;
}
.imageContainer {
    width: 150px;
    height: 150px;
    border: solid #666 1px;
}



</style>
<script src="javascript/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    //TIER ONE Options
    $(document).ready(function () {             
        $('#Foo1').live('click', function() {
            $('#hideFoo').show(500);
            $('#hideFoo2').hide(500);
        });
        $('#Foo2').live('click', function() {
            $('#hideFoo2').show(500);
            $('#hideFoo').hide(500);
        });
        //uncheck and hide form element
        //tier 1 reset for tier 2
        $('#Foo1, #Foo2').live('click', function(){
            $('#tier2Foo1, #tier2Foo2')[0].reset();
        })
    });
    </script>
</head>
<body>
<!-- ////////////// Basic form containing two options \\\\\\\\\\\\\\\\\\\\ -->
<div id="first">
  <form id="tier1" action="#">
    <div class="fieldContainer">
    <div class="imageContainer"><img src="http://dummyimage.com/150x150/000/fff" alt=" " /></div>
    <p>Foo 1</p>
      <input type="radio" name="example" value="Foo1" id="Foo1" />
      <label for="Foo1">Foo 1</label>
    </div>
    <div class="fieldContainer">
    <div class="imageContainer"><img src="http://dummyimage.com/150x150/000/fff" alt=" " /></div>
    <p>Foo 2</p>
      <input type="radio" name="example" value="Foo2" id="Foo2" />
      <label for="Foo2">Foo 2</label>
    </div>
  </form>
</div>
<!-- ////////////// tier 2 for Foo1\\\\\\\\\\\\\\\\\\\\ -->
<div id="hideFoo">
  <form id="tier2Foo1" action="#">
    <div class="fieldContainer">
    <div class="imageContainer"><img src="http://dummyimage.com/150x150/000/fff" alt=" " /></div>
    <p>The complete EcoSort Recycling System.</p>
      <input type="radio" name="example1" id="Foo1Opt1" />
      <label for="Foo1Opt1">Foo One Option 1</label>
    </div>
    <div class="fieldContainer">
    <div class="imageContainer"><img src="http://dummyimage.com/150x150/000/fff" alt=" " /></div>
    <p>The complete EcoSort Recycling System.</p>
      <input type="radio" name="example1" id="Foo1Opt2" />
      <label for="Foo1Opt2">Foo One Option 2</label>
    </div>
  </form>
</div>
<!-- ////////////// tier 2 for Foo2 \\\\\\\\\\\\\\\\\\\\ -->
<div id="hideFoo2">
  <form id="tier2Foo2" action="#">
    <div>
      <input type="radio" name="example2" id="Foo2Opt1" />
      <label for="Foo2Opt1">Foo Two Option 1</label>
    </div>
    <div>
      <input type="radio" name="example2" id="Foo2Opt2" />
      <label for="Foo2Opt2">Foo Two Option 2</label>
    </div>
    <div>
      <input type="radio" name="example2" id="Foo2Opt3" />
      <label for="Foo2Opt3">Foo Two Option 3</label>
    </div>
  </form>
</div>
</body>
</html>

乾杯

4

2 に答える 2

2

$('#tier2Foo1, #tier2Foo2')[0].reset();コレクションの 0 番目のフォームのみを選択するため、.reset1 つのフォームのみに適用されます。これは非常に簡単に修正できます。

$('#tier2Foo1, #tier2Foo2').each(function () { this.reset(); });

http://jsfiddle.net/ExplosionPIlls/ruLdA/

ちなみに、.livejQuery 1.9 で削除されました。使用.on

于 2013-02-19T12:10:05.583 に答える
-1

本当に試していません。しかし、あなたのコードでは、最初のものだけを選択しているように見えるので、2番目のものはリセットされません。

 $('#tier2Foo1, #tier2Foo2')[0].reset();

を削除してみてください[0]。

于 2013-02-19T12:12:18.607 に答える