Membuat Multiple Select Option Checkbox

Pada tulisan kali ini kita akan mencoba membuat multiple select option dengan checkbox. Pada gambar di atas ada 2 bentuk select option. Yang pertama adalah multiple select option tanpa checkbox dan yang kedua adalah multiple select option dengan checkbox.

Untuk membuat multiple select option kita biasanya menggunakan HTML tag <select> dan <option> dengan memberikan atribut ‘multiple’ pada tag select. Berikut ini coding multiple select option yang biasa (tanpa checkbox).

<h2>Multiple Select Option</h2>
<form>
    <label>Pilihan: </label>
    Tekan tombol Ctrl untuk memilih beberapa pilihan<br />
    <select name="pilih[]" multiple style="height:70px;width:200px">
        <option value="0" disabled>Pilih Opsi</option>
        <option value='1'>Pilihan Pertama</option>
        <option value='2'>Pilihan Kedua</option>
        <option value='3'>Pilihan Ketiga</option>
    </select>
    <p><input type="submit" value="Submit"></p>
</form>

Untuk beberapa memilih opsi, kita harus tekan dan tahan tombol ‘Ctrl’ pada keyboard lalu klik opsi-opsi yang ada. Jika kita klik lagi satu opsi tanpa tekan tombol Ctrl maka pilihan yang sudah dipilih tadi akan hilang dan kita harus pilih lagi. Ini tentunya akan sedikit menyulitkan.

Nah, sekarang kita coba buat multiple select option dengan checkbox supaya kita tidak perlu menggunakan tombol ‘Ctrl’ untuk memilih opsinya sehingga opsi-opsi yang sudah dipilih tadi tidak hilang karena lupa tekan tombol ‘Ctrl’. Berikut ini coding multiple select option dengan checkbox. Pada coding tersebut kita menggunakan CSS untuk menempatkan posisi checkbox sedemikian rupa sehingga tampilannya seperti pada gambar diatas. Kita juga menggunakan javascript untuk membuat dropdown selectBox.

<style>
.multiselect{width:200px;}
.selectBox{position: relative;}
.selectBox select {width:100%;}
.overSelect {position: absolute;left: 0;right: 0;top: 0;bottom: 0;}
#checkboxes {display: none;border: 1px #a0a0a0 solid;}
#checkboxes label {display: block;}
#checkboxes label:hover {background-color: #1e90ff;}
</style>

<h2>Multiple Select Option Checkbox</h2>
<form>
    <div class="multiselect">
        <div class="selectBox" onclick="showCheckboxes()">
            <select>
                <option readonly>Pilih opsi</option>
            </select>
            <div class="overSelect"></div>
        </div>
        <div id="checkboxes">
            <label for="satu">
            <input type="checkbox" id="satu" name="pilih[]" value="1" />Pilihan Pertama</label>
            <label for="dua">
            <input type="checkbox" id="dua" name="pilih[]" value="2" />Pilihan Kedua</label>
            <label for="tiga">
            <input type="checkbox" id="tiga" name="pilih[]" value="3" />Pilihan Ketiga</label>
        </div>
    </div>
    <p><input type="submit" value="Submit"></p>
</form>

<script>
    var expanded = false;
    function showCheckboxes() {
        var checkboxes = document.getElementById("checkboxes");
        if (!expanded) {
            checkboxes.style.display = "block";
            expanded = true;
        } else {
            checkboxes.style.display = "none";
            expanded = false;
        }
    }
</script>

Selamat mencoba. Happy coding…