0

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

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

4

2 回答 2

2

你可以做这样的事情：

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

这里的例子

于 2012-10-23T12:07:40.007 回答
0

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

        <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>
于 2012-10-23T12:05:44.643 回答