라디오 버튼 확인 중 제출 텍스트 변경

Question

내 사이트 구조는 CSS 파일로 스타일이 지정된 index.php로 구성됩니다.

<?php include("globals.php"); ?> 
<form action="<?php echo $website.$relative_string;?>" name="subscribe" onsubmit="javascript:return checkEmail(this);" method="post"> 
<div id="cell8" class="titlecell2"><h3>Email:</h3></div> 
<div id="cell9" class="inputcell2"> 
<input type="text" class="inputfield2" name="email" value="Your Email..." id="email2" maxlength="255" onfocus="this.value='';"> 
</div> 
<div id="cell10" class="textcell3"> 
<input name="group" type="hidden" id="group[]" value="<?php echo $group; ?>"> 
<input name="subscribe" id="sub" type="radio" value="true" checked> 
</span>Subscribe </p> 
</div> 
<div id="cell11" class="buttoncell"> 
<button type="submit" name="Submit2" value="Join" id="submitButton2"> 
<span>OK</span> 
</button> 
</div> 
<div id="cell8" class="textcell4"> 
<input type="radio" name="subscribe" id="unsub" value="false"> 
</span>Un-Subscribe </p> 
</div> 
</form> 

그것은 내 CSS 스타일 시트로 올바른 레이아웃에서 아무런 문제없이 화면에 나타납니다 : 그런 다음 별도의 파일에 다음의 PHP 코드가 포함되어 있습니다. 내가 "구독"라디오 버튼을 선택하면 제출 버튼 텍스트 "OK"가 "Join"으로 변경됩니다. 구독 취소 버튼 텍스트를 클릭하면 "확인"또는 "가입"이 "나가기"로 바뀝니다. 내가 추측 구독 취소를 클릭에 업데이트하지 않았습니다 분명히

if(document.getElementById('sub').checked) { 
    document.write("<span>Join</span>" 
} 
else if(document.getElementById('unsub').checked) { 
    document.write("<span>Leave</span>) 
} 

나는 그것이 OK 라인을 교체 (가입하도록 변경하는 것을 일의이 종류를 생각하지만, :.

나는 연구에서 일부 코드를 만들려고 내 기본값이 조인되지 않은 경우 페이지를 새로 고침 할 때 업데이트됩니다. 내가 onclick 형식을 사용해야하지만 그때 스팬 비트를 조정하는 방법을 모르는 것 같아요.

도와주세요? 많은 감사 크리스

Answer 1

다음은 jQuery가없는 일반 JavaScript의 솔루션입니다. 불필요한 오버 헤드를 피할 수 있습니다.

이 작동합니다,하지만 난 그것을 테스트 할 수있는 기회가되지 않은 :

var sub = document.getElementById('sub'); // Save element to a variable, so you don't have to look for it again 
var unsub = document.getElementById('unsub'); 
var btn = document.getElementById('submitButton2'); 

sub.onchange = function() //When sub changes 
{ 
    if(sub.checked) //If it's checked 
    { 
     btn.innerHTML = "<span>Join</span>"; // Set button to Join 
    } 
    else // If not.. 
    { 
     btn.innerHTML = "<span>OK</span>"; // Set button to OK 
    } 
} 

unsub.onchange = function() //When unsub changes 
{ 
    if(unsub.checked) //If it's checked 
    { 
     btn.innerHTML = "<span>Leave</span>"; // Set button to Leave 
    } 
    else // If not.. 
    { 
     btn.innerHTML = "<span>OK</span>"; // Set button to OK 
    } 
} 

그러나이처럼하지 말아야.

두 라디오 버튼을 라디오 그룹에 결합해야합니다.

이 경우 라디오 그룹을 청취하고, 라디오 그룹의 값을 얻고, 값에 따라 버튼 텍스트를 설정합니다.

Answer 2

y <span id="your_id">OK</span> 같은 우리의 <span>OK</span>는

<script src="//code.jquery.com/jquery-1.10.2.js"></script>  

<script> 
$("#your_class").change(function() { 
    if ($(this).is(':checked')) { 
     $("#your_id").text('Join'); 
    }else { 
     $("#your_id").text('Leave'); 
    } 
}); 
</script> 

이

모든 그래서 어떤 문제가 있는지 알려 주시기 브라우저에서 작성되었습니다 ...이 <input class="your_class" type="radio" name="subscribe" id="unsub" value="false"> 그들처럼 라디오 버튼에 클래스를 추가했다.