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，当单击第二个单选按钮时，它会更新id为“mySpan”的span的内部html，其中包含单词“FREE”，而“NOT”免费”不然呢？

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

我会添加 onclick="setSpan('FREE');"和 onclick="setSpan('不免费');"添加到各个单选按钮的 HTML，然后添加一个 JavaScript 函数，如下所示，用于设置范围的 HTML。

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

Answer 3

请检查点击时单选按钮的工作代码！