Подсчет радио кнопки не работает

Я пишу приложение с более 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, и он работает со всеми 3 на jsfiddle.

Предположительно, я сделал что-то неправильно, но я просто не вижу его.

Остальная часть моего является

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

источник

2015-07-23 Gordon Watson

Извините, я отправил неправильную ссылку. Должно быть, http://jsfiddle.net/ginneswatsonkelso/k1u2f56o/1/ –

Ухх, он работает для меня, когда я открываю вашу ссылку JSFiddle. – NealC

Спасибо NealC, но в этом проблема. Он отлично работает на JSFiddle, и я не понимаю, почему он не будет работать на моей странице приложения. –

JQuery on() событие было вызвано с использованием JQuery версии 1.7.

Версия jQuery, которую вы используете, не поддерживает метод on(). Предыдущие версии jQuery требовались .live() или .delegate(), причем последний является предпочтительным методом делегирования событий.

Если вы в состоянии, вы должны изучить обновленную версию jQuery для использования более современных функций.

источник

2015-07-23 21:07:03

Спасибо LyndseyB. Не знаю, где событие on() появляется в моем коде. Также, похоже, на jsfiddle работает jQuery 1.6.4. –

Я ссылался на JsFiddle, с которой вы связались: http://jsfiddle.net/A8tZd/, который использует метод on(). Теперь я вижу, что вы разместили ссылку на соответствующий пример. –

Подсчет радио кнопки не работает

ответ

Смежные вопросы