JavaScript Hide/Show Div on Checkbox: Checked/Unchecked

How to show/hide an element on checkbox checked/unchecked states using jQuery?

Attach onchange event to the checkbox:

<input class="coupon_question" type="checkbox" name="coupon_question" value="1" onchange="valueChanged()"/>

<script type="text/javascript">
    function valueChanged()
    {
        if($('.coupon_question').is(":checked"))   
            $(".answer").show();
        else
            $(".answer").hide();
    }
</script>

Show and hide div on check and uncheck of checkbox

Use this script instead

$('.show-check').click(function() {  if ($(this).prop('checked')) {    $(this).parents('.type-details').find('.div-check').fadeIn('slow');  } else    $(this).parents('.type-details').find('.div-check').fadeOut('slow');});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><div class="type-details">  <span class="form-label">Logo:</span>  <div class="switch">    <label>      <input type="checkbox" class="show-check" checked>      <span class="lever"></span>    </label>  </div>  <div class="landing-inputfile div-check">    <div class="col-xs-12 no-padding">      <div class="input-group">        <input type="text" class="file-input" placeholder="No file" readonly>        <label class="input-group-btn">          <span class="btn btn-default btn-flat btn-basic2">            UPLOAD <input type="file" style="display: none;">          </span>        </label>      </div>    </div>  </div></div>

jQuery hide div when checkbox checked, show on unchecked

Make sure to use the ready event.

Code:

$(document).ready(function(){
    $('#checkbox1').change(function(){
        if(this.checked)
            $('#autoUpdate').fadeIn('slow');
        else
            $('#autoUpdate').fadeOut('slow');

    });
});

show or hide div, dependet on a checkbox

try like this with JQuery Toggle

$('.initialOne').change(function() {  $('#doing').slideToggle();})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="form-check form-check-inline" style="font-size:20px">  <input class="form-check-input big-checkbox initialOne" type="checkbox" id="tpe" value="tpe">  <label class="form-check-label" for="tpe">tpe</label></div><div id="doing" style="display:none">  <div class="form-group">    <label for="exampleFormControlSelect1">Example select</label>    <select class="form-control" id="tpe" style="width: 170px;">      <option>1</option>      <option>2</option>      <option>3</option>      <option>4</option>      <option>5</option>    </select>  </div>  <div class="form-check form-check-inline" style="font-size:20px">    <input class="form-check-input big-checkbox" type="checkbox" id="n1" value="n1">    <label class="form-check-label" for="n1">n1</label>  </div>  <div class="form-check form-check-inline" style="font-size:20px">    <input class="form-check-input big-checkbox" type="checkbox" id="n2" value="n2" checked>    <label class="form-check-label" for="n2">n2</label>  </div>  <div class="form-check form-check-inline" style="font-size:20px">    <input class="form-check-input big-checkbox" type="checkbox" id="n3" value="n3" checked>    <label class="form-check-label" for="n3">n3</label>  </div></div>

Show divs if chec box checked else hide unless the 'show all' checkbox checked

You can loop through all checkboxes which are checked and show that divs else hide them.

Demo Code :

$(document).ready(function() {
  $('input[type="checkbox"]').click(function() {
    $(".box").hide() //hide all checkboxes
    //loop through checked checkboxs
    $('input[type="checkbox"]:checked').each(function() {
      var inputValue = $(this).attr("value");
      $("." + inputValue).show(); //show them
    })
  });
});

.box {
  color: #fff;
  padding: 20px;
  display: none;
  margin-top: 20px;
}

.all {
  display: block;
}

.red {
  background: red;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

label {
  margin-right: 15px;
}

<!--import jQuery cdn-->
<script src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>

<input type="hidden" name="all" value="false">

<div>
  <!--checkboxes-->
  <label><input type="checkbox"   id="checkbox"
            name="colorCheckbox" value="all"   checked="true"> 
            all 
        </label>

  <label><input type="checkbox" 
            name="colorCheckbox" value="red"> 
            red 
        </label>

  <label><input type="checkbox" 
            name="colorCheckbox" value="green">  
            green 
        </label>

  <label><input type="checkbox" 
            name="colorCheckbox" value="blue">  
            blue 
        </label>
</div>

<!--Divisions to be shown and hidden-->
<div class="all red   box">all Red Selected</div>
<div class="all green box">all Green Selected</div>
<div class="all blue  box">all Blue Selected</div>

---

Related Topics