Javascript 不工作，可能是由于冲突答案

【问题标题】：Javascript not working, possibly due to conflictJavascript 不工作，可能是由于冲突
【发布时间】：2011-07-27 23:54:03
【问题描述】：

http://www.hcfmissoula.com/grants/compassionate-care-grant

我有这个简单的单选按钮表单，如果用户对每个问题回答“是”，我希望在底部显示一个隐藏链接。这是我正在使用的代码：

<script type="text/javascript">
$('input:radio').change(function(){
    if(
        ($('input:radio[name=group1]:checked').val() == 'Yes') &&
        ($('input:radio[name=group2]:checked').val() == 'Yes') &&
        ($('input:radio[name=group3]:checked').val() == 'Yes') &&
        ($('input:radio[name=group4]:checked').val() == 'Yes')
    ){
        document.getElementById('pdflink').innerHTML = '<div><a href="http://www.mydomain.com/somefile.pdf">grab the file here</a></div>';
    }
    else {
        document.getElementById('pdflink').innerHTML = '';
    }

});
</script>

<form name="myform" action="" method="POST">
<div><br>
<p>Question 1?</p>
<input type="radio" name="group1" value="Yes"> Yes<br>
<input type="radio" name="group1" value="No"> No<br>
<hr>
<p>Question 2?</p>
<input type="radio" name="group2" value="Yes"> Yes<br>
<input type="radio" name="group2" value="No"> No<br>
<hr>
<p>Question 3?</p>
<input type="radio" name="group3" value="Yes"> Yes<br>
<input type="radio" name="group3" value="No"> No<br>
<hr>
<p>Question 4?</p>
<input type="radio" name="group4" value="Yes"> Yes<br>
<input type="radio" name="group4" value="No"> No<br>
</div>
</form>

<div id="pdflink">
</div>

当我单击所有“是”按钮时，#pdflink 中未显示该链接。

【问题讨论】：

标签： javascript forms radio-button

【解决方案1】：

更新：根据我在下面的回答，这里有一个关于如何设置文件以使其工作的 sn-p：

<script type="text/javascript">
$(document).ready(function() {
    $('input:radio').change(function(){
        // etc.
    });
});
</script>

<form name="myform" action="" method="POST">
<!-- etc. -->

以$('input:radio').change 开头的代码会立即执行，之前以下 HTML 已被渲染并添加到 DOM。您需要将该代码包装在 $(document).ready 调用中，以使其在文档加载后执行。

请参阅here 以获取证据，否则您的代码可以正常工作。 jsFiddle 会自动将 JavaScript 框架中的代码放入 $(document).ready 调用中，如下所示：

$(document).ready(function() {
  // your code here
});

另请参阅here 以获得更一致的方式来实现相同的目标（仅使用 jQuery，而不是 jQuery 和内置 JavaScript 函数的组合）。纯属建议。

【讨论】：

所以，您必须原谅我，因为我是 javascript 的菜鸟，但是我在哪里插入这段代码呢？我已经在标题中调用 js 1.6.2...
您想在示例中将该代码包装在 javascript 周围。此外，您应该尝试将所有脚本块移动到页面底部，就在结束

【解决方案2】：

查看您在 Chrome 中的代码，我看到了这一点。你的 & 符号被转义了，Chrome 说compassionate-care-grant:197Uncaught SyntaxError: Unexpected token ILLEGAL

if(
    ($('input:radio[name=group1]:checked').val() == 'Yes') &#038;&#038;
    ($('input:radio[name=group2]:checked').val() == 'Yes') &#038;&#038;
    ($('input:radio[name=group3]:checked').val() == 'Yes') &#038;&#038;
    ($('input:radio[name=group4]:checked').val() == 'Yes')
){

【讨论】：

旁注，您需要清理包含的脚本。我看到至少三个不同的 jQuerys。