CODEWITHSUNDEEP
html
user3350169
user3350169

Reputation: 209

How can i use same id for more than one radio buttons?

This is the code which i am using on my page

<ul class="tabs">
    <li>
    <input type="radio" name="tabs" id="som" value="0">
    <label for="som">Venta</label>
</li>
<li>
    <input type="radio" name="tabs" id="som" value="1">
    <label for="som">Aliquera</label>
</li>

css

.tabs input[type=radio] {
    position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
    width: 95%;
    float: none;
    list-style: none;
    position: relative;
    padding: 0;
    margin: 0px auto;
}
.tabs li{
    float: left;
    border:1px solid #006699;
    border-radius:10px 10px 0 0;
    border-bottom:none;
    width:31%;
    background-color:#EDF6FA;
}
.tabs label {
    display: block;
    padding: 10px 10px;
    border-radius: 10px 10px 0 0;
    color: #08C;

    cursor: pointer;
    position: relative;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.tabs label:hover {
    background: rgba(255,255,255,0.5);
}

The above code works only when I use different id for each input type="radio" (example if I use id="som2" and <label for="som2"> in second <li> it works for checked attribute) but I want this to work when id's are same please help me in this.

The link when I use different id's:http://jsfiddle.net/3PTJf/.

But I want this to work like this link:using same id's when I use same id's

Upvotes: 0

Views: 3360

Answers (2)

Simon Dorociak
Simon Dorociak

Reputation: 33505

How can i use same id for more than one radio buttons?

By convention, id is unique identificator - it has to be unique within whole page. In other words, one id per one element so two elements shouldn't, couldn't, musn't have same id.

You can check these threads for more information:

Note: If you want to use same style(s) for more elements, consider an usage of classes instead of ids.

Upvotes: 3

Jozsi
Jozsi

Reputation: 138

If you want to use an identificator for multiple items on the same page you should use classes. And if you want to set a different property for one element from those you can add an ID too. And in css you can select the item like .something#idofsomething . This will affect only the element which got class="something" id="idofsomething"

Upvotes: 1

Related Questions