Question

让我说我有这样的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或万事达卡，我希望自动选择信用卡，然后如果用户返回选择支票（选择Visa或万事达卡时），我希望取消选择信用卡，Visa和万事达卡。这可以仅使用html和css完成，还是必须使用javascript来完成？

谢谢

Answer 1

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

检查the <input> element的定义：

<强>属性

type

radio：一个单选按钮。您必须使用值属性来定义   此项目提交的价值。使用已选中属性指示   是否默认选中此项。单选按钮有   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.

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

}

取消选择其他无线电组上的单选按钮

2 个答案: