jQuery的動態表單元素

我正在使用jQuery的'.live（）'事件處理程序構建一個簡單的動態表單。jQuery的動態表單元素

儘管表單根據需要展開和收縮，但表單javascript'.reset'方法僅部分地起作用。爲了說明，當選擇前兩個單選按鈕（在第1層中）時，重置方法應取消選擇任何第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>

乾杯

來源

2013-02-19 Dan382

$('#tier2Foo1, #tier2Foo2')[0].reset();只選擇集合的形式零，所以你只申請.reset的一個形式。這是很簡單的修正：

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

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

順便說一句，.live jQuery的1.9已被刪除。使用.on

來源

2013-02-19 12:10:05

現貨。感謝那。 – Dan382 2013-02-19 12:22:48

-1

還沒有真正嘗試過。但在你的代碼中，似乎你只選擇了第一個，所以第二個沒有重置。

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

嘗試刪除[0]。

來源

2013-02-19 12:12:18 ipeiro

'.reset'不是jQuery收集方法，所以不起作用。 – 2013-02-19 12:14:04

@ExplosionPills真的，我的壞... – ipeiro 2013-02-19 12:18:47

jQuery的動態表單元素

回答

相關問題