Question

编辑** Bouchaala Sabri答案完美无缺

我遇到了一些jquery问题，我试图将其包含在我的页面中。由于某种原因它不起作用。不确定脚本是否错误或是否正确引入了jquery。

它基本上是一个脚本，允许用户从前三个单选按钮中选择一个选项，从第二个三个单选项中选择一个选项，但如果检查了底部三个中的任何一个，那么前6个将被取消选中检查。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
  $yearstages = $('input[name="keystage1yr2"],input[name="keystage1yr1"]');
    $savestages = $('input[name="keystage1save"]');
    $('#radios').on('change', 'input', function() {
        if (this.name == "keystage1save") {
            $yearstages.filter('input:checked').prop('checked', false);
        } else {
            $savestages.filter('input:checked').prop('checked', false);
        }
    });
</script>
</head>

<body>



<div id="radios">
<p>
<input class="radio" type="radio" name="keystage1yr1" value="Paper" /> <span>&#163;25</span>
<input class="radio" type="radio" name="keystage1yr1" value="CD" /> <span>&#163;25 excl VAT</span>
<input class="radio" type="radio" name="keystage1yr1" value="Paper & CD" /> <span>&#163;40 excl VAT</span>
</p>
<p>
<input class="radio" type="radio" name="keystage1yr2" value="Paper" /> <span>&#163;25</span>
<input class="radio" type="radio" name="keystage1yr2" value="CD" /> <span>&#163;25 excl VAT</span>
<input class="radio" type="radio" name="keystage1yr2" value="Paper & CD" /> <span>&#163;40 excl VAT</span>
</p>
<p>
<input class="radio" type="radio" name="keystage1save" value="Paper" /> <span>&#163;47.50</span>
<input class="radio" type="radio" name="keystage1save" value="CD" /> <span>&#163;47.50 excl VAT</span>
<input class="radio" type="radio" name="keystage1save" value="Paper & CD" /> <span>&#163;75 excl VAT</span>
</p>
</div>

Answer 1

您必须提供以下内容

$('#radios').on('change', 'input', function() {
    if (this.name == "keystage1save") {
        $yearstages.filter('input:checked').prop('checked', false);
    } else {
        $savestages.filter('input:checked').prop('checked', false);
    }
});

进入$(function() {...})。放置代码而不是点。此代码在页面加载后执行。

Answer 2

你永远不要忘记将代码包装在

中

jQuery(document).ready(function($){

})

Answer 3

您的脚本在加载DOM之前执行。确保像这样包装你的代码：

$(function(){
  $yearstages = $('input[name="keystage1yr2"],input[name="keystage1yr1"]');
    $savestages = $('input[name="keystage1save"]');
    $('#radios').on('change', 'input', function() {
        if (this.name == "keystage1save") {
            $yearstages.filter('input:checked').prop('checked', false);
        } else {
            $savestages.filter('input:checked').prop('checked', false);
        }
    });
});

这将在加载DOM后执行您的代码。

单选按钮包括Jquery

3 个答案: