-4

我有以下带有单选按钮的表单，我想用简单的复选框替换它们（2 个选项公司，不，谢谢） - 留下 3 个复选框。

我无法更改 JS 以使其正常工作...我尝试调整 JS 但它停止了计算或重定向的能力——这是主要的形式目的！

帮助！

<html>
<head></head>
<body>
<form onSubmit="submitForm();" id="myForm" type="get">
<input type="radio" name="myRadio1" data-op="0" value="10" onClick="calcNow();" selected />Option A&nbsp;
<input type="radio" name="myRadio1" data-op="1" value="120" onClick="calcNow();" />No thanks<br/>
<input type="radio" name="myRadio2" data-op="0" value="10" onClick="calcNow();" selected />Option B&nbsp;
<input type="radio" name="myRadio2" data-op="1" value="20" onClick="calcNow();" />No thanks<br/>
<input id="myCheckbox" name="myCheckbox" type="checkbox" value="10" onClick="calcNow();" />Otion C<br/>
<input id="myTotal" name="myTotal" type="text" value="" disabled="disabled" /><br/>
<input type="button" id="myButton" onClick="submitForm();" value="Continue" />
</form>

<script type="text/javascript">
var pages = [[["http://mysite.com/page1.html","http://mysite.com/page2.html"],["http://mysite.com/page3.html","http://mysite.com/page4.html"]],[["http://mysite.com/page5.html","http://mysite.com/page6.html"],["http://mysite.com/page7.html","http://mysite.com/page8.html"]]];

function calcNow()
{
    var cb = document.getElementById("myCheckbox");
    var cost1 = getRadioValue("myRadio1");
    var cost2 = getRadioValue("myRadio2");
    var cost3 = cb.checked ? parseInt(cb.value) : 0;
    var costTotal = cost1 + cost2 + cost3;
    document.getElementById("myTotal").value = costTotal;

    var op1 = getRadioData("myRadio1", "op");
    var op2 = getRadioData("myRadio2", "op");
    var op3 = cb.checked ? 1 : 0;

    if (op1 != undefined && op2 != undefined && op3 != undefined)
    {
        return pages[op1][op2][op3];
    }
    return undefined;
}

function submitForm()
{
    var page = calcNow();
    if (page != undefined)
    {
        // ---- To popup ----
        //alert(page);
        // ---- To navigate ----
        location.href = page;
        // ---- To alter post ----
        //var form = document.getElementById("myForm");
        //form.action = page;
        //form.submit();
    }
    else
    {

        alert("Please answer all questions.");
    }
}

function getRadioValue(name)
{
  var controls = document.getElementsByName(name);
  for (var i = 0; i < controls.length; i++) {
      if (controls[i].checked) {
          return parseInt(controls[i].value);
      }
  }
  return 0;
}

function getRadioData(name, attribute)
{
  var controls = document.getElementsByName(name);
  for (var i = 0; i < controls.length; i++) {
      if (controls[i].checked) {
          return parseInt(controls[i].dataset[attribute]);
      }
  }
  return undefined;
}
</script>
</body>
</html>
4

1 回答 1

1

我建议你，在你的情况下我不使用你的 Javascript。

有两个建议。您用两个输入复选框替换输入单选框。

<input type="checkbox" name="myRadio1" data-op="1" value="on" onClick="calcNow();" />No thanks<br/>
<input type="checkbox" name="myRadio2" data-op="0" value="10" onClick="calcNow();" selected />Option B&nbsp;

这很容易，但现在很难。当输入被选中时，调用函数calcNow()，但是当它被取消选中时，你不能调用函数。但是对于管理我建议你在 GOOGLE 上搜索。

对我来说，最好添加调用该函数的按钮submitForm();

这是checked 和 unchecked 的示例。

编辑：

我正在处理您的案例，并且有一个解决方案JSDIFFLE

于 2013-05-11T09:57:18.447 回答