Javascript не работает, возможно, из-за конфликта

Question

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, когда я нажимаю все кнопки «Да».

Answer 1

Обновление : Основываясь на моем ответе ниже, вот фрагмент того, как вам нужно настроить файл, чтобы эта работа работала:

<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, чтобы он выполнялся после загрузки документа.

См. здесь , чтобы подтвердить, что в противном случае ваш кодработает правильно.jsFiddle автоматически помещает код из фрейма JavaScript в вызов $(document).ready, например:

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

Также см. здесь для более последовательного способа достижения того же (использует jQueryтолько не сочетание jQuery и встроенных функций JavaScript).Чисто предложение.

Answer 2

Глядя на твой код в Chrome, я вижу это. Ваши амперсанды спасаются, и Chrome говорит 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')
){