取消选择其他单选组上的单选按钮答案

【问题标题】：unselect radio buttons on select other radio groups取消选择其他单选组上的单选按钮
【发布时间】：2013-07-14 04:12:17
【问题描述】：

假设我有一个这样的 div：

<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>

如您所见here，用户可以选择支票或信用卡，但假设用户选择 Visa，然后返回再次选择支票，Visa 单选按钮仍处于选中状态。我不希望这种情况发生。如果用户选择 Visa 或 Mastercard，我希望自动选择信用卡，然后如果用户返回选择 Check（选择 Visa 或 Mastercard），我希望取消选择单选按钮 Credit card、Visa 和 Mastercard。这可以仅使用 html 和 css 来完成，还是我必须使用 javascript 来完成？

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

不幸的是，HTML 中没有“子分组”。

检查the <input> element的定义：

属性

type

radio：单选按钮。您必须使用 value 属性来定义此项目提交的值。使用 checked 属性来表示是否默认选中此项。具有 name 属性的相同值在同一个 " 单选按钮中 group"；一次只能选择一个组中的一个单选按钮。

没有进一步提及组。此外，如果您搜索页面，则唯一与分组相关的位是<optgroup>，但它仅适用于<option> 标签。

为此，您唯一的选择是使用 JavaScript：

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.

【讨论】：

【解决方案2】：

在 Java 脚本中添加这个

function cheque_onclick() {

visa.checked = false;
mastercard.checked = false;

}

function visa_onclick() {
credit_card.checked = true;

}

function mastercard_onclick() {
credit_card.checked = true;

}

【讨论】：