Question

我正在编写一个包含100多个Q / A抽认卡的应用程序，并添加了交通灯按钮，以便用户反映他们对每个问题/答案的理解程度。

<form>
<fieldset data-role="controlgroup" data-theme="b" data-type="horizontal" data-mini="true">
    <legend>Rate your understanding</legend>
    <input type="radio" name="traffic-lights" class="red" id="red" value="on" checked="checked">
        <label for="red"><img src="http://new.chemistry-teaching-resources.com/images/red-light18.png" width="18px" height="18px" ></label>
    <input type="radio" name="traffic-lights" class= "orange" id="orange" value="off">
    <label for="orange"><img src="http://new.chemistry-teaching-resources.com/images/Orange-light18.png" width="18px" height="18px"></label>
    <input type="radio" name="traffic-lights" class="green" id="green" value="other">
    <label for="green"><img src="http://new.chemistry-teaching-resources.com/images/green-light18.png" width="18px" height="18px"></label>
</fieldset>

脚本是：

 $(document).ready(function () {
$(".red,.orange,.green").change(function () {
    $('.red_results').text($('.red:checked').length);
    $('.orange_results').text($('.orange:checked').length);
    $('.green_results').text($('.green:checked').length);
});

}）;

要完成，我想记录红色/橙色/绿色按钮的点击次数。

<p><span class="red_results">0</span> <img src="http://new.chemistry-teaching-resources.com/images/red-light18.png" width="18px" height="18px"> <span class="orange_results">0</span> <img src="http://new.chemistry-teaching-resources.com/images/Orange-light18.png" width="18px" height="18px"> <span class="green_results">0</span> <img src="http://new.chemistry-teaching-resources.com/images/green-light18.png" width="18px" height="18px"></p>

我基于堆栈溢出的许多类似示例，主要是Counting Checked Radio Buttons with jQuery。

我在jsfiddle http://jsfiddle.net/ginneswatsonkelso/k1u2f56o/1/上完美运行，但在我的应用程序中无效。

我使用的js是jquery-1.6.4.min.js，jquery.mobile-1.0.min.js和jquery-1.11.3.js，它适用于jsfiddle上的所有3个。

据推测，我做错了什么但是我看不到它。

我的其余部分是

<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>

Answer 1

jQuery on()事件是在jQuery 1.7版本中引入的。

您运行的jQuery版本不支持on（）方法。以前版本的jQuery需要.live()或.delegate()，后者是事件委派的首选方法。

如果您能够，您应该考虑更新您的jQuery版本以使用更多最新功能。

计数单选按钮不起作用

1 个答案: