CODEWITHSUNDEEP
javascripthtml
Benny
Benny

Reputation: 55

Many Check boxes toggle show/hide

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.

Upvotes: 0

Views: 410

Answers (1)

Everett Green
Everett Green

Reputation: 632

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

Upvotes: 2

Related Questions