CODEWITHSUNDEEP
jquery
Roi
Roi

Reputation: 27

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>

Upvotes: 1

Views: 36

Answers (2)

Geeky
Geeky

Reputation: 7496

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

Upvotes: 1

Ergec
Ergec

Reputation: 11834

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>

Upvotes: 1

Related Questions