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 を選択してから、もう一度小切手を選択すると、Visa ラジオ ボタンがまだ選択されているとします。そうなってほしくない。ユーザーが Visa または Mastercard のいずれかを選択した場合にクレジット カードを自動的に選択し、ユーザーがチェックに戻ると (Visa または Mastercard が選択されている場合)、ラジオ ボタンの [クレジット カード]、[Visa]、および [Mastercard] の選択を解除します。これは html と css だけで実行できますか、それとも javascript を使用する必要がありますか?

ありがとうございました

4

2 に答える 2

2

残念ながら、HTML には「サブグループ化」がありません。

要素の<input>定義を確認してください:

属性

    type

        radio: ラジオボタン。このアイテムによって送信される値を定義するには、 value属性を使用する必要があります。この項目がデフォルトで選択されているかどうかを示すには、 checked属性を使用します。name属性の値が同じラジオ ボタンは、同じ「ラジオ ボタン グループ」に属します。グループ内で一度に選択できるラジオ ボタンは 1 つだけです。

グループについての言及はこれ以上ありません。また、ページを検索すると、他のグループ化関連のビットはのみですが、タグのみ<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 に答える