Question

我正在使用jQuery的'.live（）'事件处理程序构建一个简单的动态表单。

虽然表单根据需要扩展和收缩，但表单javascript'.reset'方法只能部分工作。

为了澄清，当选择前两个单选按钮中的任何一个（在第1层中）时，重置方法应取消选择任何第2层选项，但是这仅适用于第一层2表单（tier2Foo1），而不是第二（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>

干杯

Answer 1

$('#tier2Foo1, #tier2Foo2')[0].reset();仅选择该集合的第0种形式，因此您只将.reset应用于一个表单。这很容易解决：

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

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

顺便说一下，jQuery 1.9中删除了.live。使用.on

Answer 2

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

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

尝试删除[0]。

使用jQuery动态表单元素

2 个答案: