Javascript и HTML - onclick

Question

Предположим, у меня есть следующий код, который создает две радиокнопки:

<li id="foli517"        class="     ">
<label class="desc" id="shippingChoice" for="Field517_0">
    Shipping Options
        </label>
<div>
<input id="shippingChoice" name="Field517" type="hidden" value="" />
    <span>
<input id="shipping1"       name="Field517"         type="radio"        class="field radio"         value="$2.00 Shipping Fee"      tabindex="13"                        checked="checked"                      />
<label class="choice" for="Field517_0"      >
    $2.00 Shipping Fee</label>
    </span>
    <span>
<input id="Field517_1"      name="Field517"         type="radio"        class="field radio"         value="I will pick up the items (free shipping)"        tabindex="14"                               />
<label class="choice" for="Field517_1"      >
    I will pick up the items (free shipping)</label>
    </span>
    </div>
</li>

Как бы я реализовал функцию javascript onclick, которая обновляет внутренний html-диапазон с идентификатором «mySpan» словом «FREE», когда нажимается 2-й переключатель, и «NOT FREE» в противном случае?

document.getElementById(WHAT GOES HERE).onclick = function() { 
    //what goes here?
};

Answer 1

document.getElementById('foli517').onchange = function(e) {
    var e = e || event;
    var target = e.target || e.srcElement;
    var span = document.getElementById('mySpan');
    var span2 = document.getElementById('mySpan2');

    if (target.type === "radio") {
        span.innerHTML = (target.id === "Field517_1") ? "FREE" : "NOT FREE";
    }
    if (target.type === "checkbox") {
        span2.innerHTML = "Is it checked? " + target.checked;
    }
};

Пример: http://jsfiddle.net/pEYnm/2/

Answer 2

Пожалуйста, отметьте Рабочий код радиокнопки при нажатии !

Answer 3

Я бы добавил onclick = "setSpan ('FREE');"и onclick = "setSpan ('NOT FREE');"в HTML соответствующих переключателей, затем добавьте функцию javascript, как показано ниже, которая устанавливает HTML-код диапазона.

function setSpan(text) {
   document.getElementById('mySpan').innerHTML = text;
}