html - 2 sets of radio buttons with same IDs

Question

Is it possible to have 2 groups of radio buttons that share an ID? I can't seem to get them to play nice with each other.

Demo: http://abenjamin765.github.io/slidemenu/

<input type="radio" name="set-one" id="radio-one">
<input type="radio" name="set-one" id="radio-two">
<input type="radio" name="set-one" id="radio-three">

<input type="radio" name="set-two" id="radio-one">
<input type="radio" name="set-two" id="radio-two">
<input type="radio" name="set-two" id="radio-three">

Cheers!

Answer 1

No. The ID attribute must be unique. The ID attribute represents a unique identification for that individual element.

From the HTML5 specification's id attribute section:

3.2.5.1 The id attribute

The id attribute specifies its element's unique identifier (ID).

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character.

If you want to let them share a reference (for styling purposes, for instance), you can instead use the class attribute:

<input type="radio" name="set-one" class="radio-one">
<input type="radio" name="set-one" class="radio-two">
<input type="radio" name="set-one" class="radio-three">

<input type="radio" name="set-two" class="radio-one">
<input type="radio" name="set-two" class="radio-two">
<input type="radio" name="set-two" class="radio-three">