Bootstrap 4 hộp kiểm 3 trạng thái

Hộp kiểm ba trạng thái cho Bootstrap

Bản trình diễn trực tuyến

• Bootstrap 2. 3. 2+
• jQuery1. 8. 1+

hộp kiểm cơ bản

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

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

Hộp kiểm ba trạng thái

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

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

kiểm tra sự kiện

<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);
});

tùy chọn nhãn

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

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

Thay đổi giá trị

________số 8_______

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

Thay đổi trạng thái kiểm tra

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

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

Làm cách nào để thêm hộp kiểm trong bootstrap 4?

Làm cách nào để sử dụng nút chuyển đổi trong bootstrap 4?

Làm cách nào để kiểm tra xem hộp kiểm có được chọn trong bootstrap không?

Làm cách nào để làm cho trường đầu vào phản hồi nhanh trong bootstrap?