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行，但显然没有更新点击取消订阅。我想如果我的默认不加入，它会更新刷新页面。我猜我需要做某种形式的onclick，但后来我不知道如何调整那个范围。

请帮帮忙？非常感谢Chris

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

但是，你不应该这样做。

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

在这种情况下，您将侦听要更改的无线电组，获取无线电组的值，根据值设置按钮文本。

单选按钮检查更改提交文本

2 个答案: