diff --git a/js/widgets/forms/checkboxradio.js b/js/widgets/forms/checkboxradio.js
index b7b2de26af4..b6c9d9c2111 100644
--- a/js/widgets/forms/checkboxradio.js
+++ b/js/widgets/forms/checkboxradio.js
@@ -196,7 +196,7 @@ $.widget( "mobile.checkboxradio", $.extend( {
 
 			// If we're inside a form
 			if ( form ) {
-				formId = form.id;
+				formId = form.getAttribute( "id" );
 
 				// If the form has an ID, collect radios scattered throught the document which
 				// nevertheless are part of the form by way of the value of their form attribute
diff --git a/tests/unit/checkboxradio/input-set-tests.html b/tests/unit/checkboxradio/input-set-tests.html
index 67eec48b4f7..3359508b2f4 100644
--- a/tests/unit/checkboxradio/input-set-tests.html
+++ b/tests/unit/checkboxradio/input-set-tests.html
@@ -32,6 +32,14 @@
 	<div data-nstest-role="page">
 		<label>Radio<input id="radio:1" type="radio" name="group1"></label>
 		<form id="the-[form]">
+			<!--
+			https://github.com/jquery/jquery-mobile/issues/7223
+			Adding the below hidden input will cause code that accesses the form attribute via
+			form.id to return this input, rather than the ID of the form. The presence of this
+			input constitutes a test against that kind of code. The correct way to retrieve the
+			id of a form is form.getAttribute( "id" ).
+			-->
+			<input type="hidden" name="id" value="">
 			<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>