Html 单选按钮，按钮（链接）上的更改按钮取决于所选选项——在Wordpress中

在过去的几天里，我一直在尝试制作一个相对简单的单选按钮——与此类似——在他们页面的末尾，他们在那里选择他们想要捐赠的金额。我正在为一些慈善机构做一些工作，他们希望有一个类似的表格

通过几个小时的谷歌搜索和插件试用，以及更多的时间尝试自己编写代码，我最终陷入了一个非常令人沮丧的境地

有人能给我指出正确的方向吗，确切地说是学习什么还是搜索什么？

---

谢谢大家!

Wordpress使用PHP，因此下面是一个使用html和PHP的单选按钮示例

$gender=”“；
value=“male”>男性

---

样式是通过切换css类来完成的。希望这能为您指明正确的方向。

Wordpress使用PHP，下面是一个html和PHP单选按钮的示例

$gender=”“；
value=“male”>男性

---

样式是通过切换css类来完成的。希望这能为您指明正确的方向。

一点jquery就能实现这一点。如果您希望它更改底部按钮的链接，您可以进行如下设置：

<label><input type="radio" name="option" value="1" /> Option 1</label><br />
<label><input type="radio" name="option" value="2" /> Option 2</label><br />
<label><input type="radio" name="option" value="3" /> Option 3</label><br />

<a id="mylink" href="/defaultpage">This link will go to <span>/defaultpage</span></a>

<script>
$('label').on('click', function() {

  var thisval = $(this).find('input').val();
  var newhref = '/defaultpage';

  if (thisval == 1) {
        newhref = '/mypage1';
  } else if (thisval == 2) {
        newhref = '/mypage2';
  } else if (thisval == 3) {
        newhref = '/mypage3';
  }

  $('#mylink').attr('href', newhref);
  $('#mylink').find('span').html(newhref);

});
</script>

选项1

选项2

选项3

$（'label'）。在（'click'，function（）上{
var thisval=$（this.find（'input'）.val（）；
var newhref='/defaultpage'；
如果（thisval==1）{
newhref='/mypage1'；
}else if（thisval==2）{
newhref='/mypage2'；
}else if（thisval==3）{
newhref='/mypage3'；
}
$（'#mylink'）.attr（'href'，newhref）；
$（'#mylink'）.find（'span'）.html（newhref）；
});

为此，您必须在站点上包含JQuery，但我认为Wordpress默认包含它。 请查看我的JSFIDLE，看看它是否正常工作：

---

一点jquery就可以实现这一点。如果您希望它更改底部按钮的链接，您可以进行如下设置：

<label><input type="radio" name="option" value="1" /> Option 1</label><br />
<label><input type="radio" name="option" value="2" /> Option 2</label><br />
<label><input type="radio" name="option" value="3" /> Option 3</label><br />

<a id="mylink" href="/defaultpage">This link will go to <span>/defaultpage</span></a>

<script>
$('label').on('click', function() {

  var thisval = $(this).find('input').val();
  var newhref = '/defaultpage';

  if (thisval == 1) {
        newhref = '/mypage1';
  } else if (thisval == 2) {
        newhref = '/mypage2';
  } else if (thisval == 3) {
        newhref = '/mypage3';
  }

  $('#mylink').attr('href', newhref);
  $('#mylink').find('span').html(newhref);

});
</script>

选项1

选项2

选项3

$（'label'）。在（'click'，function（）上{
var thisval=$（this.find（'input'）.val（）；
var newhref='/defaultpage'；
如果（thisval==1）{
newhref='/mypage1'；
}else if（thisval==2）{
newhref='/mypage2'；
}else if（thisval==3）{
newhref='/mypage3'；
}
$（'#mylink'）.attr（'href'，newhref）；
$（'#mylink'）.find（'span'）.html（newhref）；
});

为此，您必须在站点上包含JQuery，但我认为Wordpress默认包含它。 请查看我的JSFIDLE，看看它是否正常工作：

---

单击按钮时，您到底想更改什么？是将标签和字体变大，还是更改上面的图像，或者两者都更改？嗨，我只想更改底部链接“每月捐款”按钮，我想将其指向不同的页面。单击按钮时，您希望更改什么？是将标签和字体变大，还是更改上面的图像，还是两者都更改？嗨，我只想更改底部链接“每月捐款”按钮，我想转到不同的页面。谢谢它几乎解决了这个问题，我遇到的问题是，我似乎不知道如何编写代码，告诉它在单击/selectedBy Redirect时重定向，你的意思是更改它的css类？我的意思是将访问者引导到同一网站中的不同地址/网页，你可以使用

标题(“地点：http://www.yourwebsite.com/user.php“”；/*重定向浏览器*/exit（）

Exit停止它下面的代码执行谢谢！-它几乎解决了这个问题，我遇到的问题是，我似乎不知道如何编写代码，当单击/selectedBy Redirect时告诉它重定向，你是说更改它的css类？我是说将访问者引导到同一网站中的不同地址/网页您可以使用

标题（“位置：http://www.yourwebsite.com/user.php“”；/*重定向浏览器*/exit（）

Exit从executingIt停止它下面的代码。默认情况下，它在那里，但不在

$

别名下。这正是我所需要的。在稍微调整一下的帮助下，效果非常好。我的一个问题是，我想在每个标签上添加CSS代码（比如一点边距/填充/对齐）有没有办法做到这一点，或者我一直坚持把CSS作为一个整体添加到它的所有部分？你可以将html拆分，并分别为这些部分设置样式：

我的标签

。你甚至可以将整件事包装在一个div中，给它更多的样式。我已经更新了JSFIDLE来演示。我可以得到一个绿色的勾号吗？Ta！谢谢，什么是“gre”勾选“？此外，新版本需要单击“选项”文本而不是“勾选”，以在底部显示正确的链接：（否则它是有意义的。我会尝试修复它。默认情况下它在那里，但不在

$

别名下。这正是我所需要的。在一些调整的帮助下，它工作得非常好。我的一个问题是，我想向每个标签添加CSS代码（比如一点边距/填充/对齐）有没有办法做到这一点，或者我一直坚持把CSS作为一个整体添加到它的所有部分？你可以将html拆分，并分别为这些部分设置样式：

我的标签

。你甚至可以将整件事包装在一个div中，给它更多的样式。我已经更新了JSFIDLE来演示。我可以得到一个绿色的勾号吗？Ta！谢谢，什么是“gre”勾选“？此外，新版本需要点击“选项”文本而不是“勾选”，以在底部显示正确的链接：（否则它确实有意义。不过，我们会尝试修复它。