根据选中的按钮运行不同的计算时，设置单选按钮

setup a radio button when depending on which button is checked a different calculation is run?

本文关键字：计算 单选按钮 设置 运行 按钮      更新时间：2023-11-30

我需要你的帮助HTML和JavaScript如何在根据检查哪个按钮运行不同的计算时设置单选按钮？

如果勾选"是-5天"，则运行5天计算。如果勾选"否-30天"，则关闭"是"按钮并运行30天计算。

更新：

  • 首先，很抱歉将代码放在评论部分。我仍在学习一切。

  • 第二，我只做了大约3周的JavaScript和大约4周的HTML。我正在学习Lynda.com的HTML/Javascript/CSS课程。这些课程很好，但它们教授的是基础和结构，而不是所有标签和属性的深度。除了Lynda.com，我还在其他网站上学习，唯一的是我正在努力学习标签的含义，在某些情况下，标签的含义并不清楚。感谢Sebsemilia在codeschool.com上的建议，我也会查看这个网站。

对我来说，困难和挑战是，我在学习这个项目的同时，也在做这个项目（创建eForm）。这并不容易。

  • 第三-好的-这就是我的位置-谢谢你安东尼-现在30天的计算是有效的，但5天的计算不是有效的。这是我的https://jsfiddle.net/IS2016/751Lx395/1/[1]-Anthony/Sebsemilia，正如你所看到的，我从你们两个那里学到了小提琴。现在我可以使用这个网站，以更好的格式显示代码

不确定我错过了什么。

谢谢

IreneS

  [1] https://jsfiddle.net/IS2016/751Lx395/1/

更新2:

请有人告诉我我错过了什么——30天的计算有效，但5天的计算无效。尽管如此，两种计算都是相同的设置。

非常感谢你的帮助。

谢谢

Irene

更新3:

仅供参考-我想好了，只是以防万一有人关注这个问题并想知道。原因是它对我来说不起作用，因为5天和30天的计算都在单独的文件中。一旦我把所有的代码放在一个文件中，它就工作了，是的！。现在我需要弄清楚如何将它们保留在单独的文件中，并将函数changeHandler（事件）指向这些文件。我会想清楚的，同时我会把它们放在一个文件里。

我想你们中的一些人想知道。

感谢Anthony和Sebsemilia的帮助。

Irene

您的主要问题是id rbPubHealthYesNo有两次，所以它不能作为选择器工作。id在单个页面上应该始终是唯一的！

下面是一个使用jQuery的示例，演示如何使其工作：https://jsfiddle.net/r1hb8guu/

但是您的代码还有很多错误，请仔细查看我的更改。

更新：

  • 使用内联JavaScript处理程序被认为是不好的做法，因此我删除了"onclick"的内容

  • 对于同一组的单选按钮，它们不需要相同的id，但需要相同的"名称"属性

  • 我把你发布的代码作为评论，并让它在一个新的小提琴中工作：https://jsfiddle.net/gfznebfm/请仔细看看。除了"changeEventHanler"这样的拼写错误之外，还有很多错误。我不知道从哪里开始为你解释，你有很多东西要学，SO里没有人能教你。我建议您开始正确学习HTML、CSS、jQuery/JavaScript（按顺序）。有很多好的消息来源。我可以推荐https://www.codeschool.com/为此，他们还提供免费的初级课程，涵盖上述主题的基础知识。

  • 下次你对代码有问题时，请创建一个可工作的jsFiddle(https://jsfiddle.net/)。如何使用它是不言自明的。如果你想发布新代码，只需编辑/更新你的问题，不要写在评论中。

在这里接受的答案中，他有一个javascript解决方案。使用querySelectorAll选择单选按钮。点击此处了解更多信息。从单选按钮中删除USPublicHealth30Days()功能和onclick事件。然后实现他所拥有的changeHandler()功能。此外，使用与他相同的change事件。单击此处了解有关更改事件的更多信息。单击此处了解有关forEach()方法的更多信息。单击此处了解有关addEventListener的更多信息。

更新

你的querySelectorAll中有一个打字错误。它应该是rbPubHealthYesNo而不是rbPublicHealth。您还应该从html中删除onchange事件，它们是不需要的。我还从您的if else声明中删除了document.getElementById('calc14').style.display = 'block';和document.getElementById('calc15').innerHTML = ''";。在您的date30Days14()函数中，我将document.getElementById('calc15').innerHTML = text + dueDate;更改为document.getElementById('dt30Days14').value = text + dueDate;，并添加了document.getElementById('dt5Days').value = "";。我在date5Days()函数中做了基本相同的事情。我还从<div id="USAPubHealthYesNo">中删除了style="display:none"。

这是小提琴。

相关文章：