CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Klapsius
Klapsius

Reputation: 3369

change radio button color when not selected

I have radio buttons + pictures. But problem is if page are been loaded all radio buttons got a color:none. (that is good) if i click on first button than color become grey and button :selected but if i click on secound button then button change color and :selected but first button color still are grey. How to deselect color on first button.

<div id="my_div">
input type="radio" name="site" id="so"><label for="so"><img src="/icons/disp.jpg"><br>Title1</label>
<input type="radio" name="site" id="sf"><label for="sf"><img src="/icons/metal.jpg"><br>MetTitle2</label>
</div>

jquery

$('#my_div input:radio').addClass('input_hidden');
$('#my_div label').click(function() {
    $(this).addClass('selected').siblings().removeClass('selected');
});

CSS

.input_hidden {
    position: absolute;
    display:none;

}

.selected {
    background-color: #ccc;
}



#my_div label {
    display: inline-block;
    cursor: pointer;
}


#my_div label:hover {
    background-color:forestgreen;
}

#my_div label img {
    padding: 3px;

}

Upvotes: 1

Views: 1269

Answers (1)

Anonymous
Anonymous

Reputation: 10216

You could achieve this by using pure CSS like this:

input[type="radio"]:checked+label {
    background-color: #ccc;
}
.input_hidden {
    position: absolute;
    display:none;
}
#my_div label {
    display: inline-block;
    cursor: pointer;
}
#my_div label:hover {
    background-color:forestgreen;
}
#my_div label img {
    padding: 3px;
}
<div id="my_div">
    <input type="radio" name="site" id="so"><label for="so"><img src="/icons/disp.jpg"><br>Title1</label>
    <input type="radio" name="site" id="sf"><label for="sf"><img src="/icons/metal.jpg"><br>MetTitle2</label>
</div>

Upvotes: 3

Related Questions