Показать математическую разницу между заголовком из 2 элементов-флажков

Question

У меня есть форма, в которой используются флажки, аналогичные приведенным ниже

<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>

, и мне нужна разница в цене, обозначаемая заголовком, которая будет отображаться рядом с именем.если выбрана бесплатная доставка, вывод должен выглядеть как «Бесплатная доставка [+0]», а стандартная доставка будет выглядеть как «Стандартная доставка [+38]»

Я только изучаю JavaScript, так что это будет предпочтительнеено все будет делать, если это работает.

Answer 1

Я бы получал доступ к радиоэлементам по id, а затем обновлял бы текст родственного элемента родительского элемента, чтобы включить значение атрибута "title" переключателя.Например:

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

Answer 2

Вы имеете в виду что-то вроде это ?

<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;
}

Похоже, вы просто изучаете JavaScript.Это здорово, но не используйте вертолет, если вы пытаетесь управлять автомобилем (изучите базовый JavaScript и прочитайте немного о DOM, прежде чем использовать jQuery).