unselect radio buttons on select other radio groups

Issue

let’s say that I have a div like this:

<div>
    <div>   
        <input type="radio" id="cheque" name="type" value="" /> 
        <label for="cheque">Cheque</label>
    </div><br />
    <div>   
        <input type="radio" id="credit_card" name="type" value="" />    
        <label for="credit_card">Credit card</label>
        <div style="margin-left:45px;">
            <label for="visa">Visa</label>
            <input type="radio" id="visa" name="card_type" value="" /><br />

            <label for="mastercard">Mastercard</label>
            <input type="radio" id="mastercard" name="card_type" value="" />
        </div>
    </div>
</div>

As you can see here, the user can select Cheque or Credit card, but let’s say the user selects Visa and then go back to select Cheque again, the Visa radio button is still selected. I don’t want that to happen. I want Credit card to be automatically selected if the user selects either Visa or Mastercard and then if the user go back to select Cheque (while Visa or Mastercard is selected), I want the radio buttons Credit card, Visa and Mastercard to be unselected. Can this be done with only html and css or will I have to use javascript to do that?

Thank you

Solution

Unfortunatelly, there is no “subgrouping” in HTML.

Check the definition for the <input> element:

Attributes

    type

        radio: A radio button. You must use the value attribute to define the
value submitted by this item. Use the checked attribute to indicate
whether this item is selected by default. Radio buttons that have the
same value for the name attribute are in the same “radio button
group”; only one radio button in a group can be selected at one time.

There is no further mentioning of groups. Also, if you search the page, the only other grouping-related bit is <optgroup>, but it applies to <option> tags only.

For that, your only option is to use JavaScript for that:

document.getElementById('mastercard').onclick = function () {
    document.getElementById('credit_card').checked = true;
};
document.getElementById('visa').onclick = function () {
    document.getElementById('credit_card').checked = true;
};
document.getElementById('cheque').onclick = function () {
    document.getElementById('mastercard').checked = false;
    document.getElementById('visa').checked = false;
};

Your fiddle, with this code.

Answered By – acdcjunior

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0