Roi Roi - 18 days ago 5
jQuery Question

display DIV for specific checkbox

I have 5 checkboxs.
I would like to display DIV (class="hideDiv") only if the 3td checkbox is checked (value="3")

<td class="longLabel">
<p><input type='checkbox' class='tinyField' name='statusID_Array[]' value='1' /> <label>Waiting for support to reply</label></p>
<p><input type='checkbox' class='tinyField' name='statusID_Array[]' value='2' /> <label>Waiting for customer to reply</label></p>
<p><input type='checkbox' class='tinyField' name='statusID_Array[]' value='3' /> <label>Solved</label></p>
<p><input type='checkbox' class='tinyField' name='statusID_Array[]' value='4' /> <label>QA</label></p>
<p><input type='checkbox' class='tinyField' name='statusID_Array[]' value='5' /> <label>Waiting for programmer to reply</label></p>
</td>


<div id='3' class="hideDiv" style='display: none; clear: both'>
content
</div>

Answer

Here is the code. It only displays div if and only if only the third one is checked, not third one and another one. It can be changed to display if 3rd is selected and any other too.

$(".tinyField").change(function() {
    if ($(".tinyField:checked").val() === "3" && $(".tinyField:checked").length === 1) {
        $(".hideDiv").show();
    } else {
        $(".hideDiv").hide();
    }
});

$(".tinyField").change(function() {
    if ($(".tinyField:checked").val() === "3" && $(".tinyField:checked").length === 1) {
        $(".hideDiv").show();
    } else {
        $(".hideDiv").hide();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<td class="longLabel">
    <p>
        <input type='checkbox' class='tinyField' name='statusID_Array[]' value='1' />
        <label>Waiting for support to reply</label>
    </p>
    <p>
        <input type='checkbox' class='tinyField' name='statusID_Array[]' value='2' />
        <label>Waiting for customer to reply</label>
    </p>
    <p>
        <input type='checkbox' class='tinyField' name='statusID_Array[]' value='3' />
        <label>Solved</label>
    </p>
    <p>
        <input type='checkbox' class='tinyField' name='statusID_Array[]' value='4' />
        <label>QA</label>
    </p>
    <p>
        <input type='checkbox' class='tinyField' name='statusID_Array[]' value='5' />
        <label>Waiting for programmer to reply</label>
    </p>
</td>


<div id='3' class="hideDiv" style='display: none; clear: both'>
    content
</div>