Bootstrap

Aankruisvakken

Bootstrap 4 | Aankruisvakken (Checkboxes)
Aankruisvakken met standaard HTML
Item 01
Item 02
Item 03
Item 04
Aankruisvakken met CSS en Bootstrap 4
<form>
  <div class="form-group">
  <input type="checkbox" name="item_01" id="item_01" value="item_01" class="demo-select" autocomplete="off" />
  <div class="btn-group">
  <label for="item_01" class="btn btn-secondary btn-select">
  <span class="fas fa-check"></span>
  <span> </span>
  </label>
  <label for="item_01" class="btn btn-default btn-item">Item 01</label>
  </div>
  </div>
 <div class="form-group">
  <input type="checkbox" name="item_02" id="item_02" value="item_02" class="demo-select" autocomplete="off" />
  <div class="btn-group">
  <label for="item_02" class="btn btn-secondary btn-select">
  <span class="fas fa-check"></span>
  <span> </span>
  </label>
  <label for="item_02" class="btn btn-default btn-item">Item 02</label>
  </div>
  </div>
  
  <div class="form-group">
  <input type="checkbox" name="item_03" id="item_03" value="item_03" class="demo-select" autocomplete="off" />
  <div class="btn-group">
  <label for="item_03" class="btn btn-secondary btn-select">
  <span class="fas fa-check"></span>
  <span> </span>
  </label>
  <label for="item_03" class="btn btn-default btn-item">Item 03</label>
  </div>
  </div>
  
  <div class="form-group">
  <input type="checkbox" name="item_04" id="item_04" value="item_04" class="demo-select" autocomplete="off" />
  <div class="btn-group">
  <label for="item_04" class="btn btn-secondary btn-select">
  <span class="fas fa-check"></span>
  <span> </span>
  </label>
  <label for="item_04" class="btn btn-default btn-item">Item 04</label>
  </div>
  </div> 
  
  </form>
  
  <div class="container">
  <div class=""><span id="demo-teller-container"></span></div>
  </div>
<link rel="stylesheet" 
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
crossorigin="anonymous">

<style>
  
  .form-group input[type="checkbox"] {
  display: none;
  }
.form-group input[type="checkbox"]+.btn-group>label span {
  width: 20px;
  }
.form-group input[type="checkbox"]+.btn-group>label span:first-child {
  display: none;
  }
.form-group input[type="checkbox"]+.btn-group>label span:last-child {
  display: inline-block;
  }
.form-group input[type="checkbox"]:checked+.btn-group>label span:first-child {
  display: inline-block;
  }
.form-group input[type="checkbox"]:checked+.btn-group>label span:last-child {
  display: none;
  }
.btn-select {
  border: 1px #6c757d solid;
  text-align: left;
  }
.btn-item {
  border: 1px #6c757d solid;
  width: 200px;
  text-align: left;
  border-radius: 0 4px 4px 0;
  }
  
  </style>

<script type="text/javascript">
window.onload = function() {
$(document).ready(function($) {
$(".demo-select").change(function() {
var $demo_checkbox_waarde = $("[type='checkbox']:checked").length;
if ($demo_checkbox_waarde == 0) {
$demo_teller_tekst = "geen";
$demo_teller_tekst_achter = "items";
}
else if ($demo_checkbox_waarde == 1) {
$demo_teller_tekst = "één";
$demo_teller_tekst_achter = "item";
} else {
$demo_teller_tekst = $demo_checkbox_waarde; 
$demo_teller_tekst_achter = "items";
}
$("#demo-teller-container").text("U hebt " + $demo_teller_tekst + " " + $demo_teller_tekst_achter + " geselecteerd");
});
});
}
</script>
Bootstrap Lessons for Beginners:
Custom checkboxes with Bootstrap 4