jQuery click and change events with radio buttons

A litmus test to see how click and change events are handled across browsers with jQuery.

by David Biehl

HTML

<p>Select a radio button below. There are two different events that could be raised: click and change.</p>

<ul>
    <li>The click event handler will update the click status with the selected value.</li>
    <li>The change event handler will update the change status with the selected value.</li>
</ul>

<b>Note!</b> The number of times the event handler was triggered will also be displayed in parenthesis.

<hr />

<input type="radio" name="thing" value="one" id="radio_one" /> <label for="radio_one">One</label>
<input type="radio" name="thing" value="two" id="radio_two" /> <label for="radio_two">Two</label>

<hr />

click status:
<span id="click_status">nothing selected</span>
<br />
change status:
<span id="change_status">nothing selected</span>

JavaScript

var changeCalls = 0;
var clickCalls = 0;

$('input[name=thing]').change(function(e) {
    changeCalls += 1;
    $('#change_status').html($('input[name=thing]:checked').val() + " (" + changeCalls + ")");
});

$('input[name=thing]').click(function(e) {
    clickCalls++;
    $('#click_status').html($('input[name=thing]:checked').val() + " (" + clickCalls + ")");
});