0

我正在使用 jQuery 的“.live()”事件处理程序构建一个简单的动态表单。

尽管表单根据需要扩展和收缩，但表单 javascript '.reset' 方法仅部分有效。

To clarify, when either of the first two radio buttons are selected (in tier 1) the reset method should de-select any tier 2 options, however this only works with the first tier 2 form (tier2Foo1), and not the second (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();仅选择集合的第零种形式，因此您仅适用.reset于一种形式。这很容易解决：

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

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

顺便说一句，.live在 jQuery 1.9 中被删除。使用.on

于 2013-02-19T12:10:05.583 回答
-1

还真没试过。但是在您的代码中，您似乎只选择了第一个，因此第二个没有重置。

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

尝试删除[0].

于 2013-02-19T12:12:18.607 回答