Checkbox demo

The code

The html markup and javascript code is really simple:

<h4>A checkbox without a label</h4>
<input id="chkbox0" type="checkbox" checked />
<h4>A couple of labeled checkboxes</h4>
<input id="chkbox1" type="checkbox" checked /><br />
<input id="chkbox2" type="checkbox" /><br />
<input id="chkbox3" type="checkbox" />
<h4>A checkbox with a dynamic label</h4>
<input id="chkbox4" type="checkbox" />
<h4>2 checkboxes behaving as radiobuttons</h4>
<input id="chkbox5" type="checkbox" checked /><br />
<input id="chkbox6" type="checkbox" />

<div id="prompt" style="padding: 0.2em; border: 1px solid #f0f0f0; background: #fff;">Waiting for user checking/unchecking</div>

<script type="text/javascript">

  function checked(el) {
    var id = $(el).attr('id');
    $('#prompt').html(id + ': checked');
  }
  function unChecked(el) {
    var id = $(el).attr('id');
    $('#prompt').html(id + ': unchecked');
  }

    // Execute on page load
    $(function () {

      // Initialize checkboxes
      $('#chkbox0').flatcheckbox({
        onChecked: function (el) {
          checked(el);
        },
        onUnChecked: function (el) {
          unChecked(el);
        }
      });

      $('#chkbox1').flatcheckbox({
        label: "chkbox1 Label",
        onChecked: function (el) {
          checked(el);
        },
        onUnChecked: function (el) {
          unChecked(el);
        }
      });
      $('#chkbox2').flatcheckbox({
        label: "chkbox2 Label",
        onChecked: function (el) {
          checked(el);
        },
        onUnChecked: function (el) {
          unChecked(el);
        }
      });
      $('#chkbox3').flatcheckbox({
        label: "chkbox3 Label",
        onChecked: function (el) {
          checked(el);
        },
        onUnChecked: function (el) {
          unChecked(el);
        }
      });

      $('#chkbox4').flatcheckbox({
        label: "chkbox4",
        onChecked: function (el) {
          checked(el);
          $('#chkbox4').flatcheckbox('label', 'chkbox4: Uncheck');
        },
        onUnChecked: function (el) {
          unChecked(el);
          $('#chkbox4').flatcheckbox('label', 'chkbox4: Check');
        }
      });

      $('#chkbox5').flatcheckbox({
        label: "chkbox5: Checking here unselects chkbox6",
        onChecked: function (el) {
          $('#chkbox6').flatcheckbox('uncheck');
          checked(el);
        },
        onUnChecked: function (el) {
          unChecked(el);
        }
      });
      $('#chkbox6').flatcheckbox({
        label: "chkbox6: Checking here unselects chkbox5",
        onChecked: function (el) {
          $('#chkbox5').flatcheckbox('uncheck');
          checked(el);
        },
        onUnChecked: function (el) {
          unChecked(el);
        }
      });

    });

</script>

As you can see in the above code each of the callback handlers will carry as parameter the checkbox's DOM element (the <input /> element). Using jquery you can then obtain any information you want (like the element's id).