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”的跨度内的HTML与单击第二个单选按钮时为“FREE”，否则为“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

我会加onclick =“setSpan（'FREE'）;”和onclick =“setSpan（'NOT FREE'）;”到相应单选按钮的HTML，然后添加一个javascript函数，如下所示设置跨度的HTML。

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

Answer 3

请检查Working code of Radio button on click！