0

如果我有多个复选框（如下面的 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>

Javascript：

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

因此，使用此代码，当您检查奇数个项目时，会显示“* 必填”，但如果您选择偶数个项目，则不会显示。

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

IE：

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';
}

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

4

1 回答 1

2

我创建了一个小提琴演示我认为你想要完成的事情。

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

同时为两个“必需”消息设置显示值而不是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;
}
于 2013-09-06T16:58:13.023 回答