Checkbox check

by Akram kamal

HTML

<input type="checkbox" name="check">
<input type="checkbox" name="check">
<input type="checkbox" name="check">
<input type="checkbox" name="check">
<br />
<br />How many checked:
<input type="text" id="txt" />
<br />How many checkboxes there are:
<input type="text" id="txt2" />
<br />
<br />
<div id="block">Block 1</div>
<div id="block2" style="display: none;">Block 2</div>

CSS

#block {
  display: block;
  background: #cc0000;
  width: 100px;
  height: 100px;
}
#block2 {
  display: block;
  background: #00cc00;
  width: 100px;
  height: 100px;
}

JavaScript

$(document).ready(function () {
  $('#txt').val($("input[type=checkbox]:checked").length);
  $('#txt2').val($("input[type=checkbox]").length);

  $('input[type=checkbox]').change(function () {
    checked = $("input[type=checkbox]:checked").length;
    $('#block').show();
    $('#block2').hide();
    if (checked > 0) {
      $('#block').hide();
      $('#block2').show();
      $('#txt').val(checked);
    }
  });
});