CODEWITHSUNDEEP
javascriptjqueryhtml
Gordon Watson
Gordon Watson

Reputation: 11

Counting Radio Button Not Working

I'm writing an app with over 100 Q/A Flashcards and have added traffic light buttons to allow user to reflect on how well they understand each question/answer. 

<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>

The script is:

 $(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);
});

});

To finish off I'd like to record the number of red/orange/green button clicks.

<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>

I've based it on a number of similar examples on stack overflow, mainly Counting Checked Radio Buttons with jQuery.

I've got it working perfectly on jsfiddle, http://jsfiddle.net/ginneswatsonkelso/k1u2f56o/1/ but doesn't work within my app.

The js I'm using are jquery-1.6.4.min.js, jquery.mobile-1.0.min.js and jquery-1.11.3.js and it works with all 3 on jsfiddle.

Presumably, I've done something wrong but I just can't see it.

The rest of my is

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

Upvotes: 1

Views: 77

Answers (1)

Lyndsey Browning
Lyndsey Browning

Reputation: 221

The jQuery on() event was brought in with jQuery version 1.7.

The version of jQuery you are running does not support the on() method. Previous versions of jQuery required .live() or .delegate(), with the latter being the preferred method for event delegation.

If you are able to, you should look into updating your version of jQuery to use more up-to-date features.

Upvotes: 1

Related Questions