How to show a div box when user firstly checked a checkbox out of some checkboxes it may be 7 or more and hide on last uncheck of any checkbox?

Question

I want to get appear a div box when user checks any first checkbox.

I have also tried following codes: JQ Codes:

$('#checkbox').change(function() {
     if ($(this:first).is(':checked')) {
          console.log('Checked');
     } else {
         console.log('Unchecked');
     }
});

HTML Codes:

<?php foreach ($band_data as $row) { ?>
     <fieldset>
          <legend>Text</legend>
          <input type="checkbox" class="scheme-check" id="checkscheme" name="checkme">
     </fieldset>
<?php } ?>

<!--Div to be shown on hide-->

<div class=counter-box></div>

But not working please tell me any correct method to do so.

First of all thanks for instant help; I should mention the case properly to avoid misunderstanding. I use those new codes but due to 'toggle' event its hiding when I checked/unchecked any checkbox. I want to show box till last checkbox is checked and will be hide it on last uncheck.

Answer 1

(HTML)

<input class="check-box" type="checkbox">Check Me</input>
  <input class="check-box" type="checkbox">Check Me</input>
  <input class="check-box" type="checkbox">Check Me</input>
  <input class="check-box" type="checkbox">Check Me</input>

  <div class="hidden"></div>

(CSS)

.hidden {
  display: none;
  height: 100px;
  width: 100px;
  background-color: blue;
}

(JavaScript)

$(document).ready(function() {
  checkBox();
});
function checkBox() {
    $('.check-box').on("change", function() {
      $('.hidden').toggle();
    });
}

Answer 2

Whatever you are doing is correct but use class instead of id

$('.scheme-check').change(function() {
if ($(this).is(':checked')) {
console.log('Checked');
} else {
console.log('Unchecked');
}
});

Answer 3

Take a look at this: http://jsfiddle.net/nq65qnr0/

JavaScript:

// Bind the change event to the common class of all the checkboxes.
$('.scheme-check').change(function(){

  if($(".scheme-check:checked").length>1)   return; // If not the first one, then do nothing.
  if($(this).is(':checked')) {
      console.log('Checked');
      //show hide div here 
   } 
  else {
   console.log('Unchecked');
  }
});

Assuming your HTML generated to be like this :

<input type="checkbox" class="scheme-check" id="checkscheme1" name="checkme">
<input type="checkbox" class="scheme-check" id="checkscheme2" name="checkme">
<input type="checkbox" class="scheme-check" id="checkscheme3" name="checkme">
.....