extremeFE / bootstrap-checkbox

Three state checkbox for Bootstrap

bootstrap-checkbox

Three state checkbox for Bootstrap

Online Demo

Requirements

• Bootstrap 2.3.2+
• jQuery 1.8.1+

Example

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

<input id="checkbox-parent" type="checkbox" value="state"> parent<br/>
&nbsp; <input class="checkbox-child" type="checkbox" value="child1"> child1<br/>
&nbsp; <input class="checkbox-child" type="checkbox" value="child2"> child2<br/>
&nbsp; <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

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

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

---

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

<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()+"");
});