Отмена выбора радио-кнопки на некоторых других групп радио

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 или Mastercard, а затем, если пользователь вернется, чтобы выбрать «Проверить» (если выбрана Visa или Mastercard), я хочу, чтобы переключатели «Кредитная карта», «Visa» и «Mastercard» не были выбраны. Можно ли это сделать только с html и css или мне придется использовать javascript для этого?

Спасибо

Answer 1

Unfortunatelly, нет "подгруппы" в HTML.

Проверьте определение the <input> element:

Атрибуты

    type

        radio: Кнопка радио. Вы должны использовать атрибут , чтобы определить значение , представленное этим товаром. Используйте атрибут, чтобы указать , выбран ли этот элемент по умолчанию. Радиокнопки, у которых есть одинаковое значение для атрибута 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; 
}; 

Your fiddle, with this code.

Answer 2

Добавить этот в Java Script

function cheque_onclick() { 

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

} 

function visa_onclick() { 
credit_card.checked = true; 

} 

function mastercard_onclick() { 
credit_card.checked = true; 

}