의 선택을 해제 라디오 버튼

Question

이의 내가 이런 DIV 있다고 가정 해 봅시다 : 사용자가 확인하거나 신용 카드를 선택할 수 있습니다 당신이 here을 볼 수 있듯이

<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 또는 Mastercard를 선택한 경우)으로 돌아 가면 신용 카드가 자동으로 선택되기를 원합니다. 이것이 html과 css만으로 할 수 있습니까? 아니면 자바 스크립트를 사용해야합니까?

감사합니다.

Answer 1

불행히도 HTML에는 "하위 그룹화"가 없습니다.

확인 the <input> element에 대한 정의는 : 라디오 버튼 :

는

        radio     type

속성. 이 항목에 의해 제출 된 값을 정의하려면 값 속성을 사용해야합니다. 체크 특성을 사용하여 이 항목이 기본적으로 선택되었는지 여부를 나타냅니다. name 특성에 대해 값이 동일한 라디오 단추는 동일한 "라디오 단추 그룹"에 있습니다. 한 번에 한 그룹의 라디오 버튼 하나만 선택할 수 있습니다.

더 이상의 그룹에 대해서는 언급하지 않습니다. 또한 페이지를 검색하면 다른 그룹화 관련 비트는 <optgroup>이지만 <option> 태그에만 적용됩니다.

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

이

function cheque_onclick() { 

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

} 

function visa_onclick() { 
credit_card.checked = true; 

} 

function mastercard_onclick() { 
credit_card.checked = true; 

} 

자바 스크립트에서이 추가 : 그 내용은

, 당신의 유일한 옵션은 자바 스크립트를 사용하는 것입니다