Radio-Wert mit Javascript

Question

Hallo an alle Ich kann nicht erhalten den Radio-Eingang Wert hier ist mein Code: der Alarm läuft nicht Ich möchte eine Echtzeit-Berechnung, die die Summe zu zahlen und ich könnte ' t behandeln die Funk Werte ich schätze Ihre Hilfe dank: 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>

Answer 2

Zusätzlich zu der bereits gegebenen Antwort, die das OP-Problem behoben hat, könnte das OP über die Trennung von Markup und Code nachdenken und somit keinen Inline-Code innerhalb des HTML-Element-Markups verwenden.

Die Verwendung des html form Elements, das dann spezifische Formularsteuerelemente wie input, button etc. hostet, ist ebenfalls sehr zu empfehlen. Making Verwendung der "DOM Level 0" Formularsammlung ist auch nicht veraltet. Die Ereignisdelegierung, wie sie im nächsten Beispiel bereitgestellt wird, hilft, wenn andere Steuerelemente dynamisch zu einem Formular hinzugefügt werden - man muss sich nicht darum kümmern, Ereignishandler für jedes neu hinzugefügte Formularsteuerelement zu registrieren. Und zuletzt, die Registrierung zu ‚Veränderung‘ Ereignissen wird jede Änderung der Radio Sammlung erfassen ...

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>

Eine andere Art des Umgangs mit der erforderlichen Form steuert die Initialisierung direkt hiermit demonstriert wird ..

.

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>

... und nur, um es abzurunden, wenn es eine "up to date" DOM ist, könnte man über querySelector und/oder querySelectorAll ...

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>

die Nutzung von modernen DOM-Abfragen betrachten