选中单选按钮更改提交文本

Question

我的网站结构包含一个由 css 文件样式化的 index.php。 然后它在一个单独的文件中包含以下 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 行，但显然在单击取消订阅时没有更新。我想如果我的默认值没有加入，它会在刷新页面时更新。我想我需要做某种形式的点击，但我不知道如何调整跨度好位。

请帮忙？ 非常感谢克里斯

Answer 1

如果您将<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>

这都是在浏览器中编写的，所以如果有任何问题，请告诉我。

Answer 2

这是一个没有 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
    }
}

但是，您不应该这样做。

您应该将两个单选按钮组合成一个单选组。

在这种情况下，您将监听广播组的变化，获取广播组的值，根据该值设置按钮文本。