Question

这应该是一个相当容易的问题，但我不知道如何解决它，并且没有找到任何适当的答案来解决我想要做的事情。

我有一个带有一些文本的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 马上（即“10 GB” - 3 =“7 GB”），如果用户选择第二个单选按钮，整数值应加5（即“10 GB”+ 5 =“15 GB”）。

要做到这一点，我想我必须解析字符串“10 GB”以获取Integer值，然后根据所选的radiobutton进行加或减。然后用结果更新字符串。我不希望用户点击某种“提交”按钮，当用户在无线电按钮之间切换时，数字的更新应该“即时”完成。

我认为这可以用jQuery完成，我只是不知道它的方式。对于一个简单的解决方案，有没有更多经验丰富的示例代码帮助？！？

谢谢！

Answer 1

使用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";
}

Answer 2

我不会在这里给出完整的代码答案，只是指示帮助你：

不解析字符串以执行计算，只使用数字（或至少使用数字字符串）。将10的值放在特殊的data-xxx属性中。您可以稍后使用$(el).data('xxx')访问这些数据：
```
<div id="main" data-value="10">
```
对<input>元素执行相同操作以保留“delta”值，例如-3和+5或.val()使用各自的值。
如果单击任何单选按钮（使用.on('change', fn)检测事件），则将所选的任何delta值添加到#main内的值。
使用.text(sum + ' GB')

Answer 3

jQuery是完成这项相当简单的任务的一种途径。你想要隔离你的#main div。然后使用jQuery获取当前值，并使用单选按钮的onClick（或jQuery：.click(function()进行数学计算。我建议将无线电选项的值放在输入标记内。

结帐：Simple math in jquery

如何根据radiobutton的选择更新整数值？

3 个答案: