Check at lest one checkbox

by Alvin Olavarrieta

HTML

<div class="panel">
  <label class="checkbox-inline">
    <input type="checkbox" name="grp1" value="20" checked> Item
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" name="grp1" value="20"> Item
  </label>
</div>

<div class="panel">
  <label class="checkbox-inline">
    <input type="checkbox" name="grp2" value="20" checked> Item
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" name="grp2" value="20"> Item
  </label>
</div>

<div class="panel">
  <label class="checkbox-inline">
    <input type="checkbox" name="grp3" value="20" checked> Item
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" name="grp3" value="20"> Item
  </label>
</div>

CSS

.panel.error {
  background-color: red;
}

JavaScript

$(':checkbox').on('click', function() {
  var checked = $(this).closest('.panel').find('input[type="checkbox"]').is(':checked');
  console.log(checked);
  if (checked) {
    $(this).closest('.panel').removeClass("error");
  } else {
    $(this).closest('.panel').addClass("error");
  }
});

/*
$(':checkbox').on('click', function() {
  var checked = $(this).closest('.panel').find(':checked').length;
  console.log(checked);
  if (checked > 0) {
    $(this).closest('.panel').removeClass("error");
  } else {
    $(this).closest('.panel').addClass("error");
  }
});
*/