使用javascript将单选按钮转换为复选框_Javascript_Checkbox_Radio Button

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

javascript checkbox

使用javascript将单选按钮转换为复选框,javascript,checkbox,radio-button,Javascript,Checkbox,Radio Button,我在页面上有一组单选按钮和一个复选框，如下所示 <html> <head> <title>Languages</title> <script type="text/javascript"> </script> </head> <body> <span>What languages do you know?</span> <form

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

<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个

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

尝试此操作。只需复制并粘贴我的代码

        <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>


语言文字
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”；
}
其他的
{
document.getElementById（“radio1”）.type=“radio”；
document.getElementById（“radio2”）.type=“radio”；
document.getElementById（“radio3”）.type=“radio”；
document.getElementById（“radio4”）.type=“radio”；
}
你懂什么语言？
俄语

英语

西班牙

法语

超过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;
    }
}

今天就需要它，没有jquery，没有innerHTML，随时可用的代码。。。还有什么吗？Th0rndike，就这些，谢谢。没用。我勾选了复选框，但没有任何更改-（.可能缺少一些东西。我不知道这可能是我忘记关闭html标记了。但它在我的本地代码中运行良好，更容易理解。它仅在chrome中工作。但我需要这一点在所有现代浏览器中工作。此外，chrome中的不当行为：如果选中了第一个和第二个复选框，则在转换回单选按钮。实际上它必须应用于第一个选中的复选框。请让我完成此操作。@user1271160不确定跨浏览器问题是什么。。它在Firefox和Chrome中对我有效-也许您可以提供一些详细信息？当将单选按钮转换为复选框时，选中的单选按钮必须成为选中的复选框。并且在将复选框转换为收音机时，第一个选中的复选框必须成为选中的收音机。

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