Question

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

<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”复选框，则所有单选按钮必须变为复选框，用户必须能够检查更多选项。如果用户取消选中该复选框，则所有复选框必须返回到一组单选按钮。将radiobuttons更改为复选框时，所选单选按钮必须成为选中的复选框。

Answer 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

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

使用javascript将radiobuttons转换为复选框

2 个答案: