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.

Checkbox tampilan button dengan Bootstrap
× Ada yang dapat saya bantu ? Available on SundayMondayTuesdayWednesdayThursdayFridaySaturday