Checkboxradio: Always uncheck the rest of the input set upon input click

Closes gh-7183
Fixes gh-7180

Author: Gabriel Schulhof

js/widgets/forms/checkboxradio.js

@@ -131,17 +131,9 @@ $.widget( "mobile.checkboxradio", $.extend( {
 	},
 
 	_handleInputVClick: function() {
-		var $this = this.element;
-
 		// Adds checked attribute to checked input when keyboard is used
-		if ( $this.is( ":checked" ) ) {
-
-			$this.prop( "checked", true);
-			this._getInputSet().not( $this ).prop( "checked", false );
-		} else {
-			$this.prop( "checked", false );
-		}
-
+		this.element.prop( "checked", this.element.is( ":checked" ) );
+		this._getInputSet().not( this.element ).prop( "checked", false );
 		this._updateAll();
 	},
 

tests/unit/checkboxradio/checkboxradio_core.js

@@ -3,6 +3,22 @@
  */
 (function($){
 	module( 'jquery.mobile.forms.checkboxradio.js' );
+	test( "Programmatic click on radio input correctly updates group", function() {
+		var first = $( "#programmatic-click-test input" ).eq( 0 ),
+			last = $( "#programmatic-click-test input" ).eq( 2 );
+
+		last.click().checkboxradio( "refresh" );
+		deepEqual( first.prop( "checked" ), false, "First checkboxradio prop is false" );
+		deepEqual( first.prev( "label" ).hasClass( "ui-radio-off" ), true,
+			"First label has class 'ui-radio-off'" );
+		deepEqual( first.prev( "label" ).hasClass( "ui-radio-on" ), false,
+			"First label does not have class 'ui-radio-on'" );
+		deepEqual( last.prop( "checked" ), true, "Last checkboxradio prop is true" );
+		deepEqual( last.prev( "label" ).hasClass( "ui-radio-off" ), false,
+			"Last label does not have class 'ui-radio-off'" );
+		deepEqual( last.prev( "label" ).hasClass( "ui-radio-on" ), true,
+			"First label has class 'ui-radio-on'" );
+	});
 
 	test( "widget with weird label is created successfully", function() {
 		var elem = $( "#chk\\[\\'3\\'\\]-1" );

tests/unit/checkboxradio/index.html

@@ -40,6 +40,12 @@
 	<div data-nstest-role="page" data-nstest-theme="b">
 		<div data-nstest-role="content" id="the-content">
 
+			<div id="programmatic-click-test">
+				<label>Radio 1<input type="radio" name="programmatic-click-test" checked></label>
+				<label>Radio 2<input type="radio" name="programmatic-click-test"></label>
+				<label>Radio 3<input type="radio" name="programmatic-click-test"></label>
+			</div>
+
 			<input type="checkbox" id="chk['3']-1"></input>
 			<label for="chk['3']-1">Checkbox label</label>