javascript - 单选按钮在选中时从总数中减去

标签 javascript radio-button

我刚刚开始学习如何使用 javascript,它是我的第一语言。 我想做的是让每个单选按钮从输入金额中减去一个金额。目前它仅适用于 1 个单选按钮。如果我点击 2,它只会从底部的一个中减去。

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Numbers Test</title>
</head>

<body>
  <form name="operation_form">
    <label>Verify</label>
    <br/>
    <label>Acert Score:</label><input type="number" name='acertscore' />
    <br/>
    <input type="radio" name="rad1" id="rad1" value='-100' />100
    <br/>
    <input type="radio" name="rad2" id="rad2" value='-200' />200
    <br/>
    <input type="radio" name="rad3" id="rad3" value='-250' />250
    <br/>
    <input type="button" value="Calculate" onclick="operationForm();" />
    <br/>
    <label>Score total is:</label><input type="text" name="answerbox">
    <br/>
    <input type="button" value="Reset" onClick="this.form.reset()" />
  </form>
  <script type="text/javascript">
    function operationForm() {
      var form = document.forms["operation_form"];
    
      var x = form["acertscore"].value;
    
      var operation = null;
      var answer = null;
    
      if (form["rad1"].checked == true) {
        answer = x - 100;
      }
      if (form["rad2"].checked == true) {
        answer = x - 200;
      }
      if (form["rad3"].checked == true) {
        answer = x - 250;
      }
    
      form["answerbox"].value = answer;
    }
  </script>
</body>

</html>

我确信我的做法是错误的。如果有更简单的方法我很想学习。

最佳答案

每次您碰巧看到已检查的表单输入时,您都会将 Acert 分数的答案设置为减去单选按钮的值,从而每次都会有效地覆盖它。

另外 - 您使用单选按钮而不是复选框有什么原因吗?您不必在表单上有重置按钮。

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Numbers Test</title>
</head>

<body>
  <form name="operation_form">
    <label>Verify</label>
    <br/>
    <label>Acert Score:</label><input type="number" name='acertscore' />
    <br/>
    <input type="checkbox" name="rad1" id="rad1" value='-100' />100
    <br/>
    <input type="checkbox" name="rad2" id="rad2" value='-200' />200
    <br/>
    <input type="checkbox" name="rad3" id="rad3" value='-250' />250
    <br/>
    <input type="button" value="Calculate" onclick="operationForm();" />
    <br/>
    <label>Score total is:</label><input type="text" name="answerbox">
    <br/>
    <input type="button" value="Reset" onClick="this.form.reset()" />
  </form>
  <script type="text/javascript">
    function operationForm() {
      var form = document.forms["operation_form"];
    
      var x = form["acertscore"].value;
    
      var operation = null;
      var answer = null;
    
      if (form["rad1"].checked === true) {
        x -= 100;
      }
      if (form["rad2"].checked === true) {
        x -= 200;
      }
      if (form["rad3"].checked === true) {
        x -= 250;
      }

      answer = x;
    
      form["answerbox"].value = answer;
    }
  </script>
</body>

</html>

关于javascript - 单选按钮在选中时从总数中减去,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44813110/

相关文章:

swift - Xcode 单选按钮在单击后不会切换到关闭状态

javascript - 使用 javascript 返回表单的值

javascript - 在 javascript 中引用 JSONObject 时,如何使用变量(而不是名称本身)引用它?

来自数组的函数时的 Javascript 作用域问题

php - 如何结合 SELECT 和 RADIO 来显示数据

javascript - Angular : Population of Radio button groups in loop(ng-repeat) - selection not working

javascript - 需要 Syntaxhighlighter V Google 的美化性能建议吗?

javascript - 重新创建提示(); &lt;input&gt; 的功能

html - 单选按钮一个接一个地出现

javascript - 如何将单选按钮创建为按钮?