将单选按钮更改为复选框 [关闭]答案

【问题标题】：Change radio buttons to check boxes [closed]将单选按钮更改为复选框 [关闭]
【发布时间】：2013-05-05 20:48:08
【问题描述】：

我有以下带有单选按钮的表单，我想用简单的复选框替换它们（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>

【问题讨论】：

这段代码让我很生气。尝试是一回事，只是猜测是另一回事。我的意思是，为什么不在你的 body 标签上也放一个 onCLick 处理程序，哎呀，这可能有用。
你，对不起！你能修改代码吗？

标签： javascript html forms checkbox radio-button

【解决方案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;

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

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

这是example for checked and unchecked。

编辑：

我正在处理你的案子，有一个解决方案JSDIFFLE

【讨论】：

谢谢 Mirko，我可以删除“请回答所有问题”提醒吗？我也无法检查和隐藏其中一个复选框，而无需对其进行物理检查...我尝试过：checked style="display:none;"
在我吃饭之前看看编辑的解决方案
这是一个解决方案？？为什么你设置我的答案如何更好的答案？