CODEWITHSUNDEEP
javascriptjqueryformsradio-buttonlabel
user1627990
user1627990

Reputation: 2635

how to select multiple radio buttons with different names with one label?

how to select multiple radio buttons with different names with one label?

here's a simple example of what i'm trying to achieve...

<input id="1A" type="radio" name="first" value="A">firstA<br>
<input id="1B" type="radio" name="first" value="B">firstB<br>
<input id="2A" type="radio" name="second">secondA<br>
<input id="2B" type="radio" name="second">secondB<br>
<input id="3A" type="radio" name="third">thirdA<br>
<input id="3B" type="radio" name="third">thirdB<br>
<label for="1A">
    <label for="2B">
        <label for="3A">
            <div>1A / 2B / 3A</div>
        </label>
    </label>
</label>

so when i click the "1A / 2B / 3A" i want it to select make a select 3 radio buttons (firstA, secondB, thirdA), any ideas?

Upvotes: 0

Views: 1679

Answers (4)

GBRocks
GBRocks

Reputation: 698

<div id="divId">1A / 2B / 3A</div>

$('#divId').click(function () {
    $('#1A').attr('checked', checked);
    $('#2B').attr('checked', checked);
    $('#3A').attr('checked', checked);
});

Upvotes: 1

Latikov Dmitry
Latikov Dmitry

Reputation: 996

You can override default behavior of label element to propagate click event to parent elements.

function bubbleLabelClick(e){
    $("#" + $(this).attr('for')).prop('checked', true);
    return true;
}
$('label').click( bubbleLabelClick);

Test it: http://jsfiddle.net/phxjL/

The key point is return true; in function bubbleLabelClick.

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191729

Assuming that the labels are always properly nested, the click event will propagate naturally. You can just set the checked property manually then:

$("label").on('click', function () {
    $("#" + $(this).attr('for')).prop('checked', true);
});

http://jsfiddle.net/ExplosionPIlls/rT8x5/2/

Upvotes: 1

bipen
bipen

Reputation: 36531

give your div an id(unique)

 <div id="divID">1A / 2B / 3A</div>

call click function

 $('#divID').click(function(){
      $('#1A').prop('checked',true);
      $('#2B').prop('checked',true);
      $('#3A').prop('checked',true);
 });

Upvotes: 0

Related Questions