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

Question

If I have multiple check boxes (like below html code) that, if checked, show the same data on two fields. So a simple example would be to check "additional monitor" and "visio" and have "* Required" stay shown.

Html Code:

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

So with this code as is, when you check an odd number of items "* Required" is shown but if you select an even number of items it is not shown.

So I was thinking that if you set a variable to "true" and put that in the js function that it would eliminate the toggle if you select multiple items.

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

I know that this doesn't work but I'm looking for something similar to this. Please don't use jQuery unless its completely impossible to use JavaScript.

Answer 1

I've created a fiddle demoing what I think you're trying to accomplish.

As I understand it, you want to loop through all of the checkboxes to determine if any of them are checked. If any of them are checked, both text boxes are required.

It'd be more efficient to set the display value for both "required" messages simultaneously instead of running showReq for each.

Here's the method I added, called within showReq to determine if any checkboxes are checked.

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