Javascript 许多复选框切换显示/隐藏

如果我有多个复选框（如下面的html代码），如果选中，将在两个字段上显示相同的数据。因此，一个简单的例子是检查“附加监视器”和“visio”，并保持显示“*必需”

Html代码：

<table>
<tr>
    <td class="newemp_dataGLCCother">
        <label for="gl_account">GL Acccount:</label>
        <input name="gl_account" id="gl_account" type="text" maxlength="15" />
        <label id="requiredgla" style="display:none"><font size="2" color="red">* Required</font>
        </label>
    </td>
</tr>
<tr>
    <td class="newemp_dataGLCCother">
        <label for="cost_center">Cost Center:</label>
        <input id="" name="cost_center" id="cost_center" type="text" maxlength="15" />
        <label id="requiredcc" style="display:none"><font color="red">*<font size="2"> Required</font></font>
        </label>
    </td>
</tr>
<tr>
    <td>
        <input type="checkbox" name="non_standard_software" value="Additional Monitor" id="additional_monitor" onclick="showReq('requiredgla'); showReq('requiredcc')" />Additional Monitor</td>
</tr>
<tr>
    <td>
        <input type="checkbox" name="non_standard_software" value="AutoCAD" id="autocad" onclick="showReq('requiredgla'); showReq('requiredcc')" />AutoCAD</td>
</tr>
<tr>
    <td>
        <input type="checkbox" name="non_standard_software" value="MapPoint" id="mappoint" onclick="showReq('requiredgla');  showReq('requiredcc')" />MapPoint</td>
</tr>
<tr>
    <td>
        <input type="checkbox" name="non_standard_software" value="Visio" id="visio" onclick="showReq('requiredgla');  showReq('requiredcc')" />Visio</td>
</tr>
<tr>
    <td>
        <input type="checkbox" name="non_standard_software" value="Project" id="project" onclick="showReq('requiredgla');  showReq('requiredcc')" />Project</td>
</tr>
<tr>
    <td class="newemp_dataGLCCother">
        <input type="checkbox" name="non_standard_software" value="other" id="other" onclick="showReq('otherbox'); showReq('requiredgla'); showReq('requiredcc')" />Other:
        <input name="other" id="otherbox" type="text" style="display:none;" />
    </td>
</tr>

因此，按原样使用此代码，当您选中奇数个项目时，会显示“*必需”，但如果您选择偶数个项目，则不会显示

所以我在想，如果你把一个变量设置为“true”，并把它放在js函数中，那么如果你选择了多个项目，它将消除切换

即：

我知道这不管用，但我正在寻找类似的东西。 除非完全不可能使用JavaScript，否则请不要使用jQuery

我创建了一个演示，演示了我认为您正在努力实现的目标

据我所知，您希望遍历所有复选框以确定是否选中了其中任何一个复选框。如果选中其中任何一个，则两个文本框都是必需的

同时设置两条“必需”消息的显示值比为每条消息运行

showReq

更有效

下面是我添加的方法，在

showReq

中调用，以确定是否选中了任何复选框

function checkboxesChecked() {
    //get all the checkboxes
    var checkboxes = document.getElementsByName('non_standard_software');
    //loop through checkboxes, if any are checked, return true
    for (var i = 0; i < checkboxes.length; i++)
        if (checkboxes[i].checked) return true;
    return false;
}

函数checkboxesChecked（）{
//获取所有复选框
var复选框=document.getElementsByName（“非标准软件”）；
//循环检查复选框，如果选中任何复选框，则返回true
对于（变量i=0；i

所以您希望始终显示所需的？只是永远不要将其设置回显示“无”？从某种意义上说，是的。更重要的是，如果您选中1/2/3/4/5/6，它将保持显示状态，但当您取消选择所有输入框时，它应该被隐藏。我正要发布几乎相同的内容：）在取消选择后无法隐藏“other”输入框，但看起来很正确。这正是我要寻找的！我需要更多地了解for循环。非常感谢：）很好的观点，这也是分离逻辑的另一个原因。我把小提琴改得更整洁了@Benny，这个版本支持原始HTML中暗含的“其他”文本框功能：@EverettGreen我看到了你的代码，这让我难以置信。我得坐下来通读一遍才能理解。我对js还是新手…但这就是我通过实践来学习的方式。

function showReq(id) {
var dbl = true;
var e = document.getElementById(id);
if (e.style.display == 'block' && dbl === true) 
    e.style.display = 'none';
dbl = false;
else 
    dbl = true;
    e.style.display = 'block';
}

function checkboxesChecked() {
    //get all the checkboxes
    var checkboxes = document.getElementsByName('non_standard_software');
    //loop through checkboxes, if any are checked, return true
    for (var i = 0; i < checkboxes.length; i++)
        if (checkboxes[i].checked) return true;
    return false;
}