자바 스크립트로 라디오 값 받기

Question

안녕하십니까 여기 라디오 입력 값을 가져올 수 없습니다. 내 코드는 입니다. 경고가 실행되고 있지 않습니다. 나는 총계를 보여주고 실시간 계산을하고 싶습니다. D

function transfer() 
 
{ 
 
\t \t var vip=document.getElementByName('mercedes'); 
 
\t \t for (var i = 0, length = vip.length; i < length; i++) 
 
\t \t { 
 
    \t \t \t if (vip[i].checked) 
 
    \t \t \t { 
 
    \t \t \t 
 
    \t \t \t alert(vip[i].value); 
 

 
    \t \t \t 
 
    \t \t \t \t break; 
 
    \t \t \t } 
 
\t \t } 
 

 
}

<div class="form-group"> 
 
<label for="f1-about-yourself">Mercedes VIP transfer*:</label> <br> 
 
<input type="radio" name="mercedes" id="yes" value="yes" 
 
onclick="transfer()"> 
 
<label for="yes">Yes:</label> 
 
&nbsp;&nbsp;&nbsp;&nbsp; 
 
<input type="radio" name="mercedes" id="no" value="no" checked="" onclick="transfer()"> 
 
<label for="no">No:</label> 
 
</div>

Answer 1

function transfer() 
 
{ 
 
\t \t var vip=document.getElementsByName('mercedes'); 
 
\t \t for (var i = 0, length = vip.length; i < length; i++) 
 
\t \t { 
 
    \t \t \t if (vip[i].checked) 
 
    \t \t \t { 
 
    \t \t \t 
 
    \t \t \t alert(vip[i].value); 
 

 
    \t \t \t 
 
    \t \t \t \t break; 
 
    \t \t \t } 
 
\t \t } 
 

 
}

<div class="form-group"> 
 
<label for="f1-about-yourself">Mercedes VIP transfer*:</label> <br> 
 
<input type="radio" name="mercedes" id="yes" value="yes" 
 
onclick="transfer()"> 
 
<label for="yes">Yes:</label> 
 
&nbsp;&nbsp;&nbsp;&nbsp; 
 
<input type="radio" name="mercedes" id="no" value="no" onclick="transfer()"> 
 
<label for="no">No:</label> 
 
</div>

: t는 당신의 도움 덕분에 감사 라디오 값을 처리

Answer 2

OP의 문제를 해결 한 이미 주어진 답변 외에도 OP는 마크 업과 코드의 분리에 대해 생각할 수 있으므로 html 요소 마크 업에서 인라인 코드를 사용하지 않을 수 있습니다.

요소를 사용하면 input, button 등과 같은 특정 양식 컨트롤을 호스팅하는 요소도 매우 권장됩니다. "DOM Level 0" 양식 모음을 사용하는 것도 구형이 아닙니다. 다음 예제에서 제공되는 이벤트 위임은 폼에 동적으로 추가되는 다른 컨트롤이있을 경우 도움이됩니다. 새로 추가 된 폼 컨트롤에 이벤트 처리기를 등록하는 데 신경 쓸 필요가 없습니다. 그리고 마지막으로, '변화'이벤트에 등록하면 ... 라디오 컬렉션에 모든 변경을 캡처합니다

function isMercedesTransferType(elmNode) { 
 
    return ((elmNode.type === 'radio') && (elmNode.name === 'mercedes')); 
 
} 
 
function handleVipTransferChange(evt) { 
 
    var elmNode = evt.target; 
 
    if (isMercedesTransferType(elmNode) && elmNode.checked) { 
 
    console.log('handleVipTransferChange [name, value] : ', elmNode.name, elmNode.value); 
 
    } 
 
} 
 

 
function initializeVipTransfer() { 
 
    document.forms['mercedes-vip-transfer'].addEventListener('change', handleVipTransferChange, false); 
 
} 
 

 
initializeVipTransfer();

.as-console-wrapper { max-height: 100%!important; top: 70px; }

<form class="form-group" name="mercedes-vip-transfer"> 
 
    <legend>Mercedes VIP transfer*:</legend> 
 
    <label> 
 
    <input type="radio" name="mercedes" value="yes"> 
 
    <span>Yes</span> 
 
    </label> 
 
    <label> 
 
    <input type="radio" name="mercedes" value="no"> 
 
    <span>No</span> 
 
    </label> 
 
</form>

직접 저작물을 시연 될 예정 필요한 폼 컨트롤 초기화를 처리하는 또 다른 방법

.. .

function isMercedesTransferType(elmNode) { 
 
    return ((elmNode.type === 'radio') && (elmNode.name === 'mercedes')); 
 
} 
 
function handleVipTransferChange(evt) { 
 
    var elmNode = evt.target; 
 
    if (elmNode.checked) { 
 
    console.log('handleVipTransferChange [name, value] : ', elmNode.name, elmNode.value); 
 
    } 
 
} 
 

 
function initializeVipTransfer() { 
 
    var list = document.forms['mercedes-vip-transfer'].elements['mercedes']; 
 
    Array.from(list).filter(isMercedesTransferType).forEach(function (elmNode) { 
 
    elmNode.addEventListener('change', handleVipTransferChange, false); 
 
    }); 
 
} 
 

 
initializeVipTransfer();

.as-console-wrapper { max-height: 100%!important; top: 70px; }

<form class="form-group" name="mercedes-vip-transfer"> 
 
    <legend>Mercedes VIP transfer*:</legend> 
 
    <label> 
 
    <input type="radio" name="mercedes" value="yes"> 
 
    <span>Yes</span> 
 
    </label> 
 
    <label> 
 
    <input type="radio" name="mercedes" value="no"> 
 
    <span>No</span> 
 
    </label> 
 
</form>

... 그냥 순서 "날짜까지의"이 DOM은, 하나는 querySelector 및/또는 querySelectorAll를 통해 현대 DOM 쿼리의 사용을 고려할 수있는 경우, 그것을 라운드에 ...

function handleVipTransferChange(evt) { 
 
    var elmNode = evt.target; 
 
    if (elmNode.checked) { 
 
    console.log('handleVipTransferChange [name, value] : ', elmNode.name, elmNode.value); 
 
    } 
 
} 
 

 
function initializeVipTransfer() { 
 
    var list = document.querySelectorAll('#mercedes-vip-transfer [type="radio"][name="mercedes"]'); 
 
    Array.from(list).forEach(function (elmNode) { 
 
    elmNode.addEventListener('change', handleVipTransferChange, false); 
 
    }); 
 
} 
 

 
initializeVipTransfer();

.as-console-wrapper { max-height: 100%!important; top: 70px; }

<form class="form-group" id="mercedes-vip-transfer"> 
 
    <legend>Mercedes VIP transfer*:</legend> 
 
    <label> 
 
    <input type="radio" name="mercedes" value="yes"> 
 
    <span>Yes</span> 
 
    </label> 
 
    <label> 
 
    <input type="radio" name="mercedes" value="no"> 
 
    <span>No</span> 
 
    </label> 
 
</form>