单击带有标签的单选按钮

Question

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

Answer 1

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 .

Also, you must have unique ID 's in html.

Answer 2

To work your labels , your code should look like this.The problem is that , you cannot have same ID for all elements. ID is unique and if you want to work with label , you have to put for="#" attribute in your <label></label> element.So , remember <label></label> goes with for="" attribute , and that for="" attribute works with the id in the <input /> tag.And I've made your radio buttons non-multiple , so remove name="" attribute to work as multiple.

  <div class="radio-toolbar">

            <label for="first">
                Tech<input id="first" type="radio" ng-model="SelectedLayout" name="radioButton"  value="BottomLeft" />
            </label>

            <label for="second">
                AnotherOne<input id="second" type="radio" ng-model="SelectedLayout" name="radioButton" value="BottomRight" />
            </label>

            <label for="third">
                Third<input id="third" type="radio" ng-model="SelectedLayout"  name="radioButton" value="Dual" />
            </label>

            <label for="fourth">
                Fourth<input id="fourth" type="radio" ng-model="SelectedLayout" name="radioButton" value="DualRight" />
            </label>

            <label for="fifth">
                Fifth<input id="fifth" type="radio" ng-model="SelectedLayout" name="radioButton" value="Duplex" />
            </label>

            <label for="sixth">
                Sixth<input id="sixth" type="radio" ng-model="SelectedLayout" name="radioButton" value="Custom" />
            </label>
        </div>

Answer 3

Try this .I have changed backgorund color checked radio button to orange with jquery

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