display DIV for specific checkbox

Question

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>

Ergec · Accepted Answer · 2016-11-20 15:56:46Z

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>

Geeky · Accepted Answer · 2016-11-20 16:00:50Z

This is vanilla javascript solution

window.onload = function() {
  var checkboxes = document.querySelectorAll('input[type=checkbox]');
var thirdDiv=    document.getElementById('3');
  checkboxes.forEach(function(checkbox) {
    
    checkbox.addEventListener('change', function() {
      var value = this.value;
      if (this.value == 3 && this.checked) {
        thirdDiv.classList = 'hideDiv';
      }
      else
        thirdDiv.classList="";
    });
  });


}

.hideDiv {
  display: none;
  clear: both;
}

<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'>
  content
</div>

Hope it helps

Collectives™ on Stack Overflow

display DIV for specific checkbox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related