Three state checkbox for Bootstrap

View on GitHub

---

Basic checkbox

<input id="checkbox1" type="checkbox" value="1">

$('#checkbox1').checkbox();

---

Three state checkbox

<input id="checkbox2" type="checkbox" value="1">

$('#checkbox2').checkbox().chbxChecked(null);

---

check event

parent
  child1
  child2
  child3

<input id="checkbox-parent" type="checkbox" value="state"> parent<br/>
  <input class="checkbox-child" type="checkbox" value="child1"> child1<br/>
  <input class="checkbox-child" type="checkbox" value="child2"> child2<br/>
  <input class="checkbox-child" type="checkbox" value="child3"> child3

var welChild = $('.checkbox-child').checkbox();
var welParent = $('#checkbox-parent').checkbox();

// check event on parent checkbox
welParent.on('check', function(e){
  // remove ambiguous;
  welParent.chbxChecked(e.checked);
  welChild.each(function(i, element) {
    $(element).chbxChecked(e.checked);
  });
});

// check event on child checkbox
welChild.on('check', function(e) {
  var bAnd = true, bOr = false;
  welChild.each(function(i, element){
    var bChecked = $(element).chbxChecked();
    bAnd = bAnd && bChecked, bOr = bOr || bChecked;
  });

  var bChecked = bAnd === true || (bAnd === false && bOr === false ? false : null);
  welParent.chbxChecked(bChecked);
});

---

Label option

 label

<input id="checkbox4" type="checkbox" value="1"> <span id="label">label</span>

$('#checkbox4').checkbox({label:'#label'});

---

Change value

value:
Change Value

<input id="checkbox5" type="checkbox" value="1">
value: <span id="value"></span><br/>
<a id="change-value" class="btn btn-mini"><i>Change Value</i></a>

var welCheckbox5 = $('#checkbox5').checkbox();
$('#value').html(welCheckbox5.chbxVal());

$('#change-value').on('click', function(){
  var value = parseInt(welCheckbox5.chbxVal()) + 1;
  welCheckbox5.chbxVal(value);
  $('#value').html(welCheckbox5.chbxVal());
});

---

Change check state

checked:
Change Checked

<input id="checkbox6" type="checkbox" value="1">
checked: <span id="checked"></span><br/>
<a id="change-checked" class="btn btn-mini"><i>Change Checked</i></a>

var welCheckbox6 = $('#checkbox6').checkbox();
$('#checked').html(welCheckbox6.chbxChecked()+"");

$('#change-checked').on('click', function(){
  var checked = !welCheckbox6.chbxChecked();
  welCheckbox6.chbxChecked(checked);
  $('#checked').html(welCheckbox6.chbxChecked()+"");
});