如何根据单选按钮的选择更新整数值？

-1

这应该是一个相当简单的问题，但我不知道如何解决这个问题，并没有发现任何适当的答案，我想要做的事。如何根据单选按钮的选择更新整数值？

我有一些文字，简单来说，有一个字符串和两个单选按钮的HTML文件。因此，像这样：

<html> 
    <head> 
     <title>Some title</title> 
     <script src="jquery.js"></script> 
    </head> 
    <body> 

     <div id="main"> 
     <p> 10 GB </p> 
     </div> 

     <div class="radioButtons" style="width: 100%"> 
     <p><input type="radio" name="radioLessGB" value="Less" align="absmiddle"/> I want less gigabytes(-3GB) </p> 
      <p><input type="radio" name="radioMoreGB" value="More" align="absmiddle"/> I want more gigabytes (+5GB)</p> 
     </div> 
    </body> 
    </html>

我需要一种方法来更新取决于所选的单选按钮文本（即“10 GB”）的值。特别是，当用户选择第一个单选按钮时，上述字符串中的整数值应该立即减少3 （即“10GB” - 3 =“7GB”），并且如果用户选择第二无线电按钮，整数值应加5（即“10 GB”+ 5 =“15 GB”）。

要做到这一点，我想我要解析字符串“10 GB”，以获得整数值，然后添加或取决于所选择的单选按钮减去。然后用结果更新字符串。我不希望用户点击某种“提交”按钮，数字的更新应该“上即时”为单选按钮的用户切换来实现的。

我认为这可能与jQuery做，我只是不知道它的方式。有人可以帮助更简单的解决方案的示例代码？！？

谢谢！

来源

2013-01-24 djjupa

StackOverflow的总和的格式化值是不是这个问题的适当场所。我们不会为您编写代码。你需要做自己的编码，如果你不确定为什么某些东西不能按预期工作，请在代码中加上一个解释你期望它做什么，以及它实际上在做什么，包括所有的错误信息。看[ask advice]（http://stackoverflow.com/questions/ask-advice）。 –

首先查看['.change（）']（http://api.jquery.com/change/）处理程序。 – Blazemonger

解析字符串将不会真正起作用。如果你选择“Less”，并且它从当前的10GB减去3GB，那么你最终得到7GB，这很好。但是，如果您选择“更多”，则再次解析字符串，它会将5 GB添加到7 GB，并为您提供12 GB的结果 - 这是不正确的，假设它应该是15 GB，而不管先前选择选项。当然，如果你按照相反顺序选择选项，你会得到同样的问题：10 - > 15 - > 12. –

使用jQuery，你可以简单地做如下。尝试DEMO HERE

$("input").change(function() { 
    $("#main").text((10 + parseInt($(this).val())) + " GB"); 
});

如果你需要做这纯JavaScript，请使用下，尝试DEMO HERE

function valChanged(ele) { 
    document.getElementById('main1233').textContent = (10 + parseInt(ele.value)) + " GB"; 
}

来源

2013-01-24 14:12:41 Wolf

Hej狼，这正是我正在寻找！非常感谢你！通过示例开始学习jQuery的好方法。 – djjupa

欢迎.. :)你应该通过jQuery一次。这是一个非常好的图书馆... – Wolf

jQuery是完成这个相当简单的任务的一个途径。你会想隔离你的#main div。然后使用jQuery抢电流值，并与单选按钮的onClick（或jQuery的做数学题：.click(function()我建议把输入标签内的无线电选项的值

退房：Simple math in jquery

来源

2013-01-24 14:15:32 dmayo

不要使用'onclick'作为收音机和复选框输入，而是使用'onchange'。您可以使用键盘而不是鼠标来更改单选按钮或复选框的选中状态 - 由于未发生点击，“onclick”将无法识别该状态。 –

好点@grist – dmayo

我不会给这里的完整代码的答复，只是球帮助你一起。

不解析字符串来执行计算，只使用数字（或至少是一个数字串）把10的值在一个特殊的data-xxx属性里，你可以访问这些数据稍后与$(el).data('xxx')：
```
<div id="main" data-value="10"> 
```
执行相同的<input>元件，以保持“Δ”值，例如-3和+5或使用它们各自的值与.val()。
如果单击任何单选按钮（使用.on('change', fn)检测事件），您将添加任何增量值到#main中的值。
显示使用.text(sum + ' GB')

来源

2013-01-24 14:21:41

为了节省我把测试扔在一起，你知道如果jQuery会将'data-value'属性看作一个整数或一个字符串吗？ –

@AnthonyGrist这将是一个字符串，所以无论是强制还是强制转换都需要与它进行数学运算。 –

@Jack感谢您的提示！这对我正在尝试做的事很有价值！我想用parseInt（）也可以做数学，对吗？！ – djjupa

如何根据单选按钮的选择更新整数值？

回答

相关问题