Finding the Checkbox Status (Checked/Unchecked)

Below code snippet helps you find the status of your checkbox.
i.e. - Many times you need to find out whether your checkbox is CHECKED or UNCHECKED.

Here's how you can find it !!!

Script

  1. var checkedStatus = function () {
  2.   var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
  3.   if (atLeastOneIsChecked)
  4.    $('.status-value').text("Checked");
  5.   else
  6.    $('.status-value').text("UnChecked");
  7. };
  8. checkedStatus();
  9. $("input[type=checkbox]").on("click", checkedStatus);

HTML

  1. <div class="status">
  2.   <input type="checkbox" name="chk[]" value="Demo Box" />
  3.   <div class="status-value"></div>
  4. </div>

CSS

  1. .status {
  2.   color: #3c763d;
  3.   background-color: #dff0d8;
  4.   border-color: #d6e9c6;
  5.   width: 130px;
  6.   padding: 15px;
  7.   margin-top: 20px;
  8.   border: 1px solid transparent;
  9.   border-radius: 4px;
  10. }
  11. input {
  12.   float: left;
  13.   margin-right: 10px;
  14. }

No comments:

Post a Comment