Anzeige die mathematische Differenz zwischen dem Titel 2 Checkbox Elemente

Question

Ich habe ein Formular, die

<Form> 
<table> 
    <tr> 
     <td align="left" width="15"><input name="switch" title="0" id="radio17" value="Free Shipping" checked="checked" type="radio" /> 
     </td> 
     <td>Free Shipping</td> 
    </tr> 
    <tr> 
     <td align="left" width="15"><input name="switch" title="38" id="radio18" value="Standard Shipping" type="radio" /> 
     </td> 
     <td>Standard Shipping 
     </td> 
    </tr> 
</table> 

unten Kontrollkästchen ähnlich die verwendet und was ich brauche, ist der Unterschied im Preis, der durch den Titel bezeichnet , wenn neben dem Namen angezeigt.So, wenn das freie Verschiffen ausgewählt wird, sollte die Ausgabe wie "Free Shipping [+0]" aussehen und Standardversand wird wie "Standardversand [+38]" aussehen

Ich lerne gerade Javascript, so dass es bevorzugt wäre, aber alles wird tun, wenn es funktioniert.

Answer 1

Meinst du sowas wie this?

<form> 
    <label><input type="radio" name="switch" title="Free Shipping" id="freeshipping" value="0" checked="checked" type="radio" />Free Shipping</label>  
    <label><input type="radio" name="switch" title="Standard Shipping" id="standardshipping" value="38" />Standard Shipping</label> 
    <div>Selected shipping method: <span id="shippingtitle"> </span> [+<span id="shippingcost"> </span>]</div> 
</form> 

window.onload = function(){ 
    var i; 
    for(i = 0; i < document.getElementsByName('switch').length; ++i){ 
     document.getElementsByName('switch')[i].onclick = function(){ 
      document.getElementById('shippingtitle').firstChild.data = this.title; 
      document.getElementById('shippingcost').firstChild.data = this.value; 
     } 
    } 
}; 

label{ 
    display:block; 
    float:left; 
    clear:left; 
    width:30%; 
} 
form{ 
    max-width:500px; 
} 

Es scheint, dass Sie nur JavaScript lernen. Das ist großartig, aber benutzen Sie keinen Helikopter, wenn Sie versuchen, ein Auto zu steuern (lernen Sie grundlegendes JavaScript und lesen Sie ein wenig über das DOM, bevor Sie jQuery verwenden).

Answer 2

Ich würde auf die Radio-Elemente per ID zugreifen und dann den Text des übergeordneten Element-Geschwisterelements aktualisieren, um den Wert des Attributs "title" des Optionsfelds einzuschließen. Zum Beispiel:

function showPriceDifference(id) { 
    var el = document.getElementById(id) 
    , price = el.getAttribute('title'); 
    el.parentElement.nextElementSibling.innerHTML += ' [+' + price + ']'; 
} 
showPriceDifference('radio17'); 
showPriceDifference('radio18');