2

假设我有一个这样的 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>

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

谢谢

4

2 回答 2

2

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

检查元素的<input>定义：

属性

    type

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

没有进一步提及组。此外，如果您搜索页面，则唯一与分组相关的位是<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;
};

您的小提琴，使用此代码。

于 2013-07-14T04:18:00.760 回答
1

在 Java 脚本中添加这个

function cheque_onclick() {

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

}

function visa_onclick() {
credit_card.checked = true;

}

function mastercard_onclick() {
credit_card.checked = true;

}
于 2013-07-14T04:42:43.170 回答