Question

如果我有多个复选框（如下面的html代码），如果选中，则会在两个字段中显示相同的数据。所以一个简单的例子就是检查“附加监视器”和“visio”并显示“* Required”。

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函数中，那么如果你选择多个项目就会消除切换。

即：

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

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

Answer 1

我创建了a fiddle演示了我认为你想要完成的事情。

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

同时为“必需”消息设置显示值而不是为每个消息运行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;
}

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

1 个答案: