使用 javascript 将单选按钮转换为复选框答案

【问题标题】：Converting radiobuttons into checkboxes with javascript使用 javascript 将单选按钮转换为复选框
【发布时间】：2012-10-23 11:57:34
【问题描述】：

我在页面上有一组单选按钮和一个复选框，如下所示

<html>
<head>
    <title>Languages</title>
    <script type="text/javascript">

    </script>
</head>
<body>
    <span>What languages do you know?</span>
    <form action="">
    <div id="controlArea">
        <input type="radio" name="lanRadio" value="radioRussian"><label for="radioRussian">Russian</label><br />
        <input type="radio" name="lanRadio" value="radioEnglish"><label for="radioRussian">English</label><br />
        <input type="radio" name="lanRadio" value="radioSpain"><label for="radioRussian">Spain</label><br />
        <input type="radio" name="lanRadio" value="radioFrench"><label for="radioRussian">French</label><br />
        <input type="checkbox" name="checkIn" value="CheckMore"><label for="CheckMore">More than 1</label><br />
    </div>
    </form>
</body>

我想要做的是，如果用户选中“超过 1 个”复选框，则所有单选按钮都必须变成复选框，并且用户必须能够选中更多选项。如果用户取消选中复选框，则所有复选框必须变回一组单选按钮。将单选按钮更改为复选框时，选中的单选按钮必须成为选中的复选框。

【问题讨论】：

今天需要它，没有 jquery，没有 innerHTML，准备使用代码......还有什么？
Th0rndike，就是这样，谢谢。

标签： javascript checkbox radio-button

【解决方案1】：

你可以这样做：

function morethan(cbox) {
    // setup new state
    var state = "radio";
    if (cbox.checked) {
        state = "checkbox";
    }
    // get all by name and change state
    var radios = document.getElementsByName('lanRadio');
    for (i = 0; i < radios.length; i++) {
        radios[i].type = state;
    }
}

您需要将onclick 处理程序添加到您的复选框：

<input type="checkbox" name="checkIn" onclick="morethan(this)" value="CheckMore">

Example here

【讨论】：

它仅适用于 chrome。但我需要这个在所有现代浏览器中工作。此外，chrome 中的不当行为：如果选中了第一个和第二个复选框，则在转换回单选按钮时，它适用于第二个单选按钮。实际上它必须适用于第一个选中的复选框。 请让我完成这个。
@user1271160 不确定跨浏览器问题是什么。它在 Firefox 和 Chrome 中对我有用 - 也许您可以提供更多信息？
将单选转换为复选框时，选中的单选必须变为选中的复选框。并且在将复选框转换为单选时，第一个选中的复选框必须成为选中的单选。

【解决方案2】：

试试这个。只需复制并粘贴我的代码

        <html>
    <head>
        <title>Languages</title>
        <script type="text/javascript">
    if(document.getElementById("radio1").type=="radio")
        {
        document.getElementById("radio1").type="checkbox";
        document.getElementById("radio2").type="checkbox";
        document.getElementById("radio3").type="checkbox";
        document.getElementById("radio4").type="checkbox";
        }
        else
        {
        document.getElementById("radio1").type="radio";
        document.getElementById("radio2").type="radio";
        document.getElementById("radio3").type="radio";
        document.getElementById("radio4").type="radio";
        }
        </script>
    </head>
    <body>
        <span>What languages do you know?</span>
        <form action="">
        <div id="controlArea">
            <input type="radio" id="radio1" name="lanRadio" value="radioRussian"><label for="radioRussian">Russian</label><br />
            <input type="radio" id="radio2" name="lanRadio" value="radioEnglish"><label for="radioRussian">English</label><br />
            <input type="radio" id="radio3" name="lanRadio" value="radioSpain"><label for="radioRussian">Spain</label><br />
            <input type="radio" id="radio4" name="lanRadio" value="radioFrench"><label for="radioRussian">French</label><br />
            <input type="checkbox" name="checkIn" value="CheckMore" onchange="fnc()"><label for="CheckMore">More than 1</label><br />
        </div>
        </form>
    </body>

【讨论】：

无效。我检查了复选框，没有任何改变。 :-(。也许缺少了什么。我不知道
那可能是我忘记关闭 html 标签了。但它在我的本地代码中运行良好且更易于理解