자바 스크립트와 HTML - 온 클릭

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> 

내가 자바 스크립트 함수가 함께 ID가 "mySpan"와 범위의 내부 HTML을 업데이트하는 onclick을 구현하는 것이 어떻게 두 번째 라디오 버튼을 클릭하면 "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'); and onclick = "setSpan ('NOT FREE');" 해당 라디오 버튼의 HTML에 다음과 같이 span의 HTML을 설정하는 javascript 함수를 추가하십시오.

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

Answer 3

Working code of Radio button on click을 확인하시기 바랍니다!