Javascript无法正常工作,可能是由于冲突

时间:2011-07-27 23:54:04

标签: javascript forms radio-button

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中的链接未显示。

2 个答案:

答案 0 :(得分:3)

更新:根据我在下面的回答,以下是您需要设置文件以使其工作的代码段:

<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函数的组合)。纯粹是一个建议。

答案 1 :(得分:0)

在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')
){