Javascript not working, possibly due to conflict

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

I have this simple radio button form, and if the user answers "yes" to each question, I want a hidden link to show up at the bottom. Here's the code I'm working with:

<s开发者_JAVA百科cript 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>

The link is not showing up in #pdflink when I click all of the yes buttons.

Update: Based on my answer below, here's a snippet of how you need to set up your file to make this work:

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

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

The code starting with $('input:radio').change is executed immediately, before the following HTML has been rendered and added to the DOM. You need to wrap that code in a $(document).ready call to make it execute after the document has loaded.

See here for evidence that, otherwise, your code works correctly. jsFiddle automatically puts the code from the JavaScript frame inside a $(document).ready call, like this:

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

Also see here for a more consistent way to achieve the same thing (uses jQuery only, not a combination of jQuery and built-in JavaScript functions). Purely a suggestion.

Looking at your code in Chrome, I see this. Your ampersands are getting escaped and Chrome is saying compassionate-care-grant:197Uncaught SyntaxError: Unexpected token ILLEGAL

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