javascript - 如何在 javascript 中从图像单选按钮生成表单链接以提交按钮

Question

我需要知道如何才能生成从 radio 图像到表单中下一个按钮的链接。我有原始代码，当检查每个问题的所有三个问题或单选按钮时，它会生成一个链接并且该按钮变得可单击。我向其中添加了图像，它们是可单击的，但正在生成下一个按钮的链接，以便可以单击它。如果您可以提供帮助，请使用详细的示例，因为我是 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 fiddle 中有很多错误，我会尝试列出尽可能多的错误:

• 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>元素。在这里，由于您将 class active 设置为任何选定的 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

我已经创建了你原来的 fiddle 的一个分支来向你展示如何使它工作:http://jsfiddle.net/rCXT5/1/