CODEWITHSUNDEEP
htmltwitter-bootstrap-3
Gags
Gags

Reputation: 3839

Two radio buttons share one “id”conditionally?

I am trying to adopt different design for a page on mobile and desktop. And for this, 3 blocks of radio button and some other stuff needs to be redesigned for mobile interface but on Same Page.

So, my concern is that can 2 blocks share one ID as i am hiding and showing as per media queries.

Example:

Block 1

<div class="visible-xs">
   <input type="radio" name="yellow" id="yellow-color" value="14" 
   class="yellow radio-custom" checked="checked" />
   <input type="radio" name="red" id="red-color" value="52" 
   class="red radio-custom" />
</div>

Block 2

<div class="hidden-xs">
   <input type="radio" name="yellow" id="yellow-color" value="14" 
   class="yellow radio-custom1" checked="checked" />
   <input type="radio" name="red" id="red-color" value="52" 
   class="red radio-custom1" />
</div>

It is working in terms of functionality but problem is that radio at mobile page is not getting checked

Upvotes: 2

Views: 150

Answers (2)

Paulo Capelo
Paulo Capelo

Reputation: 1092

I will answer your question with another question. :)

Why dont you uses only one form and format, based weather is desktop or mobile, using CSS?

this way you wouldnt have to create 2 forms.

I am thinking about something like this:

http://www.htmlgoodies.com/beyond/css/targeting-specific-devices-in-your-style-sheets.html

This page I sent have basic instruction. The idea is to identify the device and deliver the proper CSS, this way you only need one DIV and the 2 CSS.

you could also do that with javascript:

<script type="text/javascript"> // <![CDATA[
if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1) || (navigator.userAgent.indexOf('Android') != -1)) {
        document.write("css_mobile.css");
    } 
    else
    {
        document.write("css_browser.css");
    }
// ]]>
</script>

cheers

Upvotes: 1

Alejandro Iv&#225;n
Alejandro Iv&#225;n

Reputation: 4071

To group radio inputs they have to use the same name attribute and to check one of them automatically, only one radio input of that same-name-group has to have the checked="checked" attribute.

If two or more have that attribute, none will be selected by default.

Upvotes: 2

Related Questions