Show/Hide Multiple Elements Based on Checkbox

Use JQuery to show/hide a combination of divs, or other elements, based on the state of a checkbox.

by Matthew Schenker

HTML

<div class="controller_container">
  <label for="display_controller_1234">Display 1, 2, 3, 4</label>
  <input class="display_controller_1234" type="checkbox" name="display_controller_1234" value="1" />
</div>
<div class="controller_container">
  <label for="display_controller_1234">Display 1, 2, 3, 4</label>
  <input class="display_controller_1234" type="checkbox" name="display_controller_1234" value="1" />
</div>
<div class="controller_container">
  <label for="display_controller_12">Display 1, 2</label>
  <input class="display_controller_12" type="checkbox" name="display_controller_12" value="1" />
</div>
<div class="controller_container">
  <label for="display_controller_12">Display 1, 2</label>
  <input class="display_controller_12" type="checkbox" name="display_controller_12" value="1" />
</div>
<div class="controller_container">
  <label for="display_controller_12">Display 1, 2</label>
  <input class="display_controller_12" type="checkbox" name="display_controller_12" value="1" />
</div>

<div class="conditional_container_1">
  <label for="conditional_field">Container 1</label>
  <input type="text" name="conditional_field" class="conditional_field" />
</div>
<div class="conditional_container_2">
  <label for="conditional_field">Container 2</label>
  <input type="text" name="conditional_field" class="conditional_field" />
</div>
<div class="conditional_container_3">
  <label for="conditional_field">Container 3</label>
  <input type="text" name="conditional_field" class="conditional_field" />
</div>
<div class="conditional_container_4">
  <label for="conditional_field">Container 4</label>
  <input type="text" name="conditional_field" class="conditional_field" />
</div>

CSS

.controller_container,
.conditional_container {
  width: 300px;
  padding: 20px 0;
}

.controller_container {
  background-color: #f0f0f0;
}

.conditional_container {
  margin-top: 20px;
  background-color: #ddd;
  display: none;
}

JavaScript

$(".conditional_container_1").hide();
$(".conditional_container_2").hide();
$(".conditional_container_3").hide();
$(".conditional_container_4").hide();
$(".display_controller_1234").click(function() {
  if ($(this).prop("checked")) {
    $(".conditional_container_1").show(400),
    $(".conditional_container_2").show(400),
    $(".conditional_container_3").show(400),
    $(".conditional_container_4").show(400),
    location.reload();
  } else {
    $(".conditional_container_1").hide(400),
    $(".conditional_container_2").hide(400),
    $(".conditional_container_3").hide(400),
    $(".conditional_container_4").hide(400);
  }
});

$(".conditional_container_1").hide();
$(".conditional_container_2").hide();
$(".conditional_container_3").hide();
$(".conditional_container_4").hide();
$(".display_controller_12").click(function() {
  if ($(this).prop("checked")) {
    $(".conditional_container_1").show(400),
    $(".conditional_container_2").show(400);
  } else {
    $(".conditional_container_1").hide(400),
    $(".conditional_container_2").hide(400),
    $(".conditional_container_3").hide(400),
    $(".conditional_container_4").hide(400);
  }
});