Радио-кнопки проверены смены текста отправки

Question

Структура моего сайта состоит из index.php, который создается в файле css. Затем он включает следующий код 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 стилей. Мне бы хотелось, чтобы это произошло, когда я выбираю радиокнопку «Подписаться», текст кнопки «ОК» меняется на «Присоединиться». Когда я нажимаю на кнопку «Отменить подписку», текст «ОК» или «Присоединиться» изменяется на «Оставить».

Я попытался сделать некоторый код из исследования:

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

Я думаю, этот вид работал в том, что он изменился Join (замена OK линии, но, очевидно, не обновлялись щелкать отказаться от подписки, я думаю. он обновился при обновлении страницы, если бы мой по умолчанию не присоединился. Думаю, мне нужно сделать какую-то форму onclick, но потом я понятия не имею, как отрегулировать этот бит диапазона ok.

Помогите? Большое спасибо Chris

Answer 1

Вот решение простого JavaScript без jQuery. Это позволяет избежать лишних накладных расходов.

Это должно работать, но у меня не было возможности проверить это:

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>OK</span> к чему-то вроде <span id="your_id">OK</span> затем добавил класс в радио-кнопки, как этот <input class="your_class" type="radio" name="subscribe" id="unsub" value="false"> им ...

<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> 

Все это было написано в браузере так, дайте мне знать, если есть какие-либо проблемы.