Checkbox/Radio change event problem #3781

ibnadam opened this Issue Mar 9, 2012 · 14 comments


None yet

7 participants

ibnadam commented Mar 9, 2012

First here's the code:

<div id="new-value" style="padding:3px;background-color:red;color:white;"></div>
<fieldset data-role="controlgroup" data-mini=true>
<input type="radio" name="test" id="test-1" value="Short option 1" checked="checked"/>
<label for="test-1">Short option 1</label>
<input type="radio" name="test" id="test-2" value="This is some very long option 2" />
<label for="test-2">This is some very long option 2</label>
<input type="radio" name="test" id="test-3" value="This is some very long option 3" />
<label for="test-3">This is some very long option 3</label>
$("input:radio[name=test]").on("change", function(event, ui){
    var value = $(this).val();
    $('#new-value').html("New value: " + value);

I'm seeing a problem on my Samsung Galaxy s2 (android 2.3.6) where if I make selection by clicking on a radio button where there is label text I get inconsistent results: i.e. the value that I get in the change handler is not for the button that appears to be checked.

The easiest way I found to reproduce this problem is as follows (You may have to try this a few times):
When first option has a short label, and the next option has a long label (as in my example) and when selecting the first option your finger happens to touch that first button & the next button as well AND your finger touches the part of the first button with no label text AND your finger touches the part of the second button with the label text, then 2 change events are fired which is fine but you end up with the first button appearing to be checked whereas the change event handler shows the checked value to be for the second button.

Happens with 1.0.1, 1.1.0-rc1 & latest.

ibnadam commented Mar 9, 2012

You can try it here also:

@johnbender johnbender closed this Mar 9, 2012
@johnbender johnbender reopened this Mar 9, 2012


It kind of sounds like you have to mash your fingers on the checkboxes to get the effect?

ibnadam commented Mar 10, 2012

Yes, when you touch "across" the buttons, so it's more likely to happen when buttons are in mini version.

anho commented Jun 18, 2012

Removing return false; from the vclick-handler of the label does it for me without side effects yet.

gillvm commented Sep 14, 2012

still getting the same problem as described above with android on jqm 1.1.1 with jq 1.8.1 . Problem is worse the bigger the screen,ie samsung tab 10.1 .

not sure what andrea means about vclick-handler, if you could give a worked example of the fix it would be great, thanks


Issue #5071 (closed as duplicate) is the same but with checkboxes and Android 4.0.4.


Edited the title (was: "radio buttons change event problem (android 2.3.6)").

The issue seems to appear on both Android and iOS with radio buttons and checkboxes.

Closed #4959 as duplicate.

Is there a work around for this issue? I have a mobile survey app I'm working on and this is a real problem.

gillvm commented Feb 8, 2013

The workaround we used was to add a carriage return above and below the button text. This makes the button wider and so the user is less likely to click the edge. Sounds lame, but it seems to work.

That doesn't sound very robust. Is this problem fixed in version 1.3.0?

The workaround I came up with is to add a click handler to each of the checkbox inputs. Then in the click event handler first call refresh on the checkbox and then iterate through the list of checkboxes for that group and programmatically check or uncheck the input based on whether it has the class ui-checkbox-on or ui-checkbox-off. Here is the code I'm using.

$(document).bind("pageinit", function (e) {
var $page = $(;
$page.find("input:checkbox[name=selections]").click(function () {

    $page.find("input:checkbox[name=selections]").each(function (index, element) {
        var $checkbox = $(this);
        var $label = $;

        if ($label.hasClass("ui-checkbox-off")) {
            $checkbox.prop("checked", false);
        } else if ($label.hasClass("ui-checkbox-on")) {
            $checkbox.prop("checked", true);



We are planning on making some bigger changes in button markup and CSS for 1.4. That is probably needed to fix this so I am changing the milestone to 1.4.

Related issues: #4826 and #3073


@ibnadam @gillvm @InternetSavage - Can you test again with latest code on master?

  <link rel="stylesheet"  href="" /> 
  <script src=""></script> 
  <script src=""></script> 

@arschmitz -If this is still an issue we might have to change vclick to click in the checkboxradio widget.


no response to request for test closing

@arschmitz arschmitz closed this Aug 12, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment