Merge 6f3afde into 4696651

js/widgets/forms/checkboxradio.js

@@ -10,12 +10,15 @@
 //>>css.theme: ../css/themes/default/jquery.mobile.theme.css
 
 define( [ "jquery",
+	"../../navigation/path",
 	"../../jquery.mobile.core",
 	"../../jquery.mobile.widget",
 	"./reset" ], function( jQuery ) {
 //>>excludeEnd("jqmBuildExclude");
 (function( $, undefined ) {
 
+var escapeId = $.mobile.path.hashToSelector;
+
 $.widget( "mobile.checkboxradio", $.extend( {
 
 	initSelector: "input:not( :jqmData(role='flipswitch' ) )[type='checkbox'],input[type='radio']:not( :jqmData(role='flipswitch' ))",
@@ -42,7 +45,7 @@ $.widget( "mobile.checkboxradio", $.extend( {
 				input
 					.closest( "form, fieldset, :jqmData(role='page'), :jqmData(role='dialog')" )
 					.find( "label" )
-					.filter( "[for='" + $.mobile.path.hashToSelector( input[0].id ) + "']" )
+					.filter( "[for='" + escapeId( input[0].id ) + "']" )
 					.first(),
 			inputtype = input[0].type,
 			checkedClass = "ui-" + inputtype + "-on",
@@ -182,14 +185,93 @@ $.widget( "mobile.checkboxradio", $.extend( {
 		});
 	},
 
-	//returns either a set of radios with the same name attribute, or a single checkbox
+	// Returns those radio buttons that are supposed to be in the same group as
+	// this radio button. In the case of a checkbox or a radio lacking a name
+	// attribute, it returns this.element.
 	_getInputSet: function() {
-		if ( this.inputtype === "checkbox" ) {
-			return this.element;
+		var formParent, inputSelector, thisPage, thisPageSelector, formId,
+			thisElement = this.element,
+			outsideForm = false,
+			returnValue = thisElement,
+			name = thisElement[ 0 ].name;
+
+		// We only look for group members if this widget is not a checkbox or
+		// an unnamed radio button
+		if ( !( this.inputtype === "checkbox" || !name ) ) {
+
+			inputSelector = "input[type='radio'][name='" + name + "']";
+			thisPageSelector = ":jqmData(role='page'), " +
+				":jqmData(role='dialog')" +
+				( $.mobile.page ? ", :mobile-page" : "" ) +
+				", body";
+			thisPage = thisElement.closest( thisPageSelector );
+			formId = thisElement.attr( "form" );
+
+			// Establish formParent
+			if ( formId ) {
+
+				// This element has a form attribute. Let's find the form.
+				formParent = thisPage.find( "#" + escapeId( formId ) );
+			} else {
+
+				// Are we inside a form?
+				// We don't use .closest() here because we want the outermost
+				// form and some browsers may fail to discard any nested forms.
+				formParent = thisElement.parents( "form" ).last();
+			}
+
+			if ( formParent.length > 0 ) {
+				formId = formParent.attr( "id" );
+
+				// If the form has an ID, append those inputs that may be
+				// scattered throughout the page, but belonging to the parent
+				// form
+				if ( formId ) {
+					returnValue = thisPage
+						.find( inputSelector + "[form='" + escapeId( formId ) + "']" )
+						.add( returnValue );
+				}
+			} else {
+				outsideForm = true;
+				formParent = thisPage;
+			}
+
+			returnValue = formParent
+				.find( inputSelector )
+				.filter( function() {
+					var formAttribute, otherRadio;
+
+					if ( this === thisElement[ 0 ] ) {
+						return true;
+					}
+
+					otherRadio = $( this );
+					formAttribute = otherRadio.attr( "form" );
+
+					return outsideForm ?
+
+						// If this.element is outside of a form then the other
+						// radio must not have a form attribute in order to be
+						// admitted to this group
+						( !formAttribute &&
+
+							// If it doesn't have a form attribute, it must
+							// still have the same parent form
+							otherRadio.closest( "form, " +
+								thisPageSelector )[ 0 ] ===
+									formParent[ 0 ] ):
+
+						// If this.element is inside a form then the other
+						// radio is part of this group if it either doesn't
+						// have a form attribute, or if its form attribute is
+						// equal to the formId (including an undefined formId)
+						( !formAttribute ) ||
+							( formAttribute === formId );
+				})
+				.add( returnValue );
 		}
 
-		return this.element.closest( "form, :jqmData(role='page'), :jqmData(role='dialog')" )
-			.find( "input[name='" + this.element[ 0 ].name + "'][type='" + this.inputtype + "']" );
+		return returnValue;
 	},
 
 	_updateAll: function() {

tests/unit/checkboxradio/input-set-tests.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<title>jQuery Mobile Checkboxradio Input Set Test Suite</title>
+
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../js/requirejs.config.js"></script>
+	<script src="../../../js/jquery.tag.inserter.js"></script>
+	<script src="../../../tests/jquery.testHelper.js"></script>
+	<script src="../../../external/qunit/qunit.js"></script>
+	<script>
+		$.testHelper.asyncLoad([
+			[
+				"widgets/forms/checkboxradio",
+			],
+			[
+				"input_set_tests_core.js"
+			]
+		]);
+	</script>
+
+	<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
+	<link rel="stylesheet" href="../../jqm-tests.css"/>
+
+	<script src="../../swarminject.js"></script>
+</head>
+<body>
+
+	<div id="qunit"></div>
+
+	<div data-nstest-role="page">
+		<label>Radio<input id="radio:1" type="radio" name="group1"></label>
+		<form id="the-[form]">
+			<label>Radio<input id="radio:2" type="radio" name="group1"></label>
+			<label>Radio<input id="radio:7" type="radio" name="group1" form="the-'other'-form"></label>
+		</form>
+		<label>Radio<input id="radio:3" type="radio" name="group1" form="the-[form]"></label>
+		<form id="the-'other'-form">
+			<label>Radio<input id="radio:6" type="radio" name="group1" form="the-[form]"></label>
+			<label>Radio<input id="radio:4" type="radio" name="group1"></label>
+		</form>
+
+		<!-- radio5 (below) is not supposed to have a name -->
+		<label>Radio<input id="radio:5" type="radio"></label>
+	</div>
+
+	<label>Radio<input id="radio:8" type="radio" name="group1"></label>
+</body>
+</html>

tests/unit/checkboxradio/input_set_tests_core.js

@@ -0,0 +1,38 @@
+( function( $, undefined ) {
+
+$.mobile.ns = "nstest-";
+
+test( "Radio groups are correctly identified", function() {
+	var theDocument = $( document );
+		groups = {
+			"#radio\\:1": "#radio\\:1",
+			"#radio\\:2": "#radio\\:2,#radio\\:3,#radio\\:6",
+			"#radio\\:3": "#radio\\:2,#radio\\:3,#radio\\:6",
+			"#radio\\:6": "#radio\\:2,#radio\\:3,#radio\\:6",
+			"#radio\\:4": "#radio\\:4,#radio\\:7",
+			"#radio\\:7": "#radio\\:4,#radio\\:7",
+			"#radio\\:5": "#radio\\:5",
+			"#radio\\:8": "#radio\\:8"
+		};
+
+	$.each( groups, function( index, value ) {
+		var result,
+			radio = $( index ),
+			group = $( value );
+
+		result = $.mobile.checkboxradio.prototype._getInputSet.call({
+			element: radio,
+			inputtype: "radio",
+			document: theDocument
+		});
+		deepEqual( group.length, result.length,
+			index + ": length of group is correct" );
+		group.each( function() {
+			deepEqual( result.filter( this ).length, 1,
+				index + ": " + $( this ).attr( "id" ) +
+					" is correctly present in the result" );
+		});
+	});
+});
+
+})( jQuery );