Dalam membuat aplikasi berbasis web, kita mungkin memberikan pilihan-piihan yang menggunakan checkbox. Kali ini kita akan membuat checkbox dengan tampilan button menggunakan framework Bootstrap.
Source code utama checkbox dengan tampilan button adalah seperti contoh berikut ini:
<div class=”btn-group” data-toggle=”buttons”>
<label class=”btn btn-default”>
<input type=”checkbox”/> Checkbox 1
</label>
<label class=”btn btn-default”>
<input type=”checkbox”/> Checkbox 2
</label>
<label class=”btn btn-default”>
<input type=”checkbox”/> Checkbox 3
</label>
</div>
Source code lengkapnya adalah:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Checkbox dengan button</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container”>
<br/><br/>
<div class=”btn-group” data-toggle=”buttons”>
<label class=”btn btn-default”>
<input type=”checkbox”/> Checkbox 1
</label>
<label class=”btn btn-default”>
<input type=”checkbox”/> Checkbox 2
</label>
<label class=”btn btn-default”>
<input type=”checkbox”/> Checkbox 3
</label>
</div>
</div> <!– /container –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
</body>
</html>
Demo dapat dilihat di http://aris.proweb.asia/dist/coba25.html dengan tampilan seperti berikut ini:
Pada contoh di atas, Checkbox 2 dan Checkbox 3 aktif .
Informasi lebih lanjut silahkan mengunjungi http://getbootstrap.com/javascript/#buttons-checkbox-radio .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.