如何從圖像單選按鈕生成表單鏈接，以提交按鈕在javascript

Question

我需要知道如何使它，以便從無線電圖像生成鏈接到我的表單中的下一個按鈕。我有原始的代碼，當每個問題的所有三個問題或單選按鈕都檢查時，它會生成一個鏈接，並且該按鈕變得可點擊。我添加了圖像，它們是可點擊的，但鏈接正在生成到下一個按鈕，以便它可以被點擊。如果您可以幫助，請使用詳細的示例，因爲我是JavaScript新手。

下面是與圖像單選按鈕的代碼：http://jsfiddle.net/P74tn/1/

該文件的HTML：

<form name="quiz" id='quiz'> 

<h4>What carrier do you have?</h4> 
<div class="radio" id="form"> 
    <div style="list-style: none;" onclick=tryToMakeLink(); name="q1" value="AT&T"><img 
width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-image.jpg" /></div> 
    <div style="list-style: none;" onclick=tryToMakeLink(); name="q1" value="Other"> 
<img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-image.jpg" /> 
</div> 
    <div style="list-style: none;" onclick=tryToMakeLink(); name="q1" value="Unlocked"> 
<img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-image.jpg" /> 
</div> 
</div> 

<br /><br /><br /> 

<h4>What is your phones capicity?</h4> 
<div class="radio" id="form"> 
    <div style="list-style: none;" type="radio" onclick=tryToMakeLink(); name="q2" 
value="8GB"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5- 
image.jpg" /></div> 
    <div style="list-style: none;" type="radio" onclick=tryToMakeLink(); name="q2" 
value="16GB"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5- 
image.jpg" /></div> 
</div> 

<br /><br /><br /> 

<h4>What color is your phone?</h4> 
<div class="radio" id="form"> 
    <div style="list-style: none;" type="radio" onclick=tryToMakeLink(); name="q3" 
value="Black"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5- 
image.jpg" /></div> 
    <div style="list-style: none;" type="radio" onclick=tryToMakeLink(); name="q3" 
value="White"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5- 
image.jpg" /></div> 
</div> 



<br> 
<div id=linkDiv> 
<input type=button disabled=disabled value=Next> 
</div> 
</form> 

Answer 1

有你的JS提琴許多錯誤，我會試着列出儘可能多的：

• ID應該是唯一的，這裏幾個div具有相同的id「form」。你應該將其重命名，如id="form_carrier"，id="form_color"等

• 您使用jQuery和香草JS的一個奇怪的組合：要麼使用jQuery的處理程序格式（即$('.radio div').on('click', function() {});）或內聯JS（即onclick="tryToMakeLink();"）。請注意，對於內聯JS，JS代碼必須用引號括起來。

• 獲取選擇結果的選擇器試圖獲得<input>元素，而在HTML代碼中，您使用的是<div>;作爲編碼，你的選擇器不會選擇任何東西。

• :checked選擇器僅適用於<input>元素;由於您使用的是<div>元素，因此無法使用它。在這裏，由於您將課程活動設置爲任何選定的div，因此您可以使用課程選擇器。

你最後的選擇會是這樣的：var q1=$('div[name="q1"].active');

• 如果選擇不匹配任何元素，它不返回null，則返回一個空數組：document.querySelector('input[name="q3"]:checked')永遠不會爲空。您應該將您的支票替換爲：q1.length === 0

• 您不能使用q1.value，因爲值是節點的屬性。您可以使用jQuery的功能q1 = q1.attr('value')

• 而不是改變你的DIV的innerHTML，你應該簡單地更新輸入元素

我已經創建了原始小提琴叉向您展示如何使其工作：http://jsfiddle.net/rCXT5/1/