For-each loop through radio buttons in XSL

Question

I have got the following problem: I have an XML file, from which I am creating an HTML file using XSL. In the XSL file I have a for-each loop, which creates a couple of radio buttons and of course I need the only one button being checked, but after I open my index.php file in my project folder it is possible to check ALL radio buttons. How can I achieve, that after looping only one radio button can be selected? Thank you in advance!

Here the code snippet inside the loop:

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <input type="radio" name="radio-choice" id="radio-choice-3"  />
        <label for="radio-choice-3"><xsl:value-of select="text"/></label>
    </fieldset>
</div>

PS I suppose it is the ID that does not change and every time a loop goes through the code an independent radio button is created and obviously the attribute controlgroup doesn't group the buttons.

Answer 1

This transformation :

<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>
 <xsl:strip-space elements="*"/>

 <xsl:template match="x">
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <input type="radio" name="radio-choice" id="radio-choice-{position()}"  />
            <label for="radio-choice-{position()}"><xsl:value-of select="text"/></label>
        </fieldset>
    </div>
 </xsl:template>
</xsl:stylesheet>

when applied on the following XML document (none has been provided !!!):

<t>
 <x>
  <text>Choice one</text>
 </x>
 <x>
  <text>Choice two</text>
 </x>
 <x>
  <text>Choice three</text>
 </x>
</t>

produces the wanted, correct result:

<div data-role="fieldcontain">
   <fieldset data-role="controlgroup">
      <input type="radio" name="radio-choice" id="radio-choice-1"/>
      <label for="radio-choice-1">Choice one</label>
   </fieldset>
</div>
<div data-role="fieldcontain">
   <fieldset data-role="controlgroup">
      <input type="radio" name="radio-choice" id="radio-choice-2"/>
      <label for="radio-choice-2">Choice two</label>
   </fieldset>
</div>
<div data-role="fieldcontain">
   <fieldset data-role="controlgroup">
      <input type="radio" name="radio-choice" id="radio-choice-3"/>
      <label for="radio-choice-3">Choice three</label>
   </fieldset>
</div>

and when displayed in the browser, only one radio button can be in selected state at any time.

Answer 2

To make it possible to check only one radio button, all of the <input type="radio"/> elements must have the same @name attribute. For example:

<input type="radio" name="radio-choice" id="radio-choice-3"/>
<input type="radio" name="radio-choice" id="radio-choice-4"/>