Radio button clicked with label

Marlen Published at Dev

MarLen

I have multiple radio buttons. In the code that i have they are different pictures corresponding with different functions.

The user has to know which radio button is clicked. Therefor i'm trying to find a way to change the background of the radio button after it has been clicked. In order for the code to work the <label> has to stay arround the <input> tag.

 <div class="radio-toolbar">

        <label class="BottomLeft">
            <input id="tech" type="radio" ng-model="SelectedLayout" value="BottomLeft" />
        </label>

        <label class="BottomRight">
            <input id="tech" type="radio" ng-model="SelectedLayout" value="BottomRight" />
        </label>

        <label class="Dual">
            <input id="tech" type="radio" ng-model="SelectedLayout" value="Dual" />
        </label>

        <label class="DualRight">
            <input id="tech" type="radio" ng-model="SelectedLayout" value="DualRight" />
        </label>

        <label class="Duplex">
            <input id="tech" type="radio" ng-model="SelectedLayout" value="Duplex" />
        </label>

        <label class="Custom">
            <input id="tech" type="radio" ng-model="SelectedLayout" value="Custom" />
        </label>
    </div>

Here's the JSfiddle

Beginner

You can try this:

$('input[type=radio]')
    .on('click', function() {
        var $label = $(this).closest('label');
        $('label').not($label).css('background-color', 'green');
        $label.css('background-color', '#2C8BDE');
});

Here is the FIDDLE.