Cara Membuat Dropdown Multiple Checkbox dengan Javascript

Hai, jumpa lagi dengan saya, kali ini membuat tutorial mengenai Cara Membuat Dropdown Multiple Checkbox Dengan Javascript, mungkin sering kalian lihat pada menu website banyak sekali orang menggunakan dropdown, namun pernah kah kalian melihat checkbox dibuat seperti dropdown, berikut tutorialnya.

Baik langsung saja silahkan kalian buka teks editornya terlebih dahulu, kemudian ketikan kode HTML berikut.

<dl class="dropdown"> 
  
    <dt>
    <a href="#">
      <span class="hida">Select</span>    
      <p class="multiSel"></p>  
    </a>
    </dt>
  
    <dd>
        <div class="mutliSelect">
            <ul>
                <li>
                    <input type="checkbox" value="Honda" />Honda</li>
                <li>
                    <input type="checkbox" value="Yamaha" />Yamaha</li>
                <li>
                    <input type="checkbox" value="Kawasaki" />Kawasaki</li>
                <li>
                    <input type="checkbox" value="Suzuki" />Suzuki</li>
                <li>
                    <input type="checkbox" value="KTM" />KTM</li>
                <li>
                    <input type="checkbox" value="Ducati" />Ducati</li>
            </ul>
        </div>
    </dd>
</dl>

Setelah itu, lanjutkan untuk kode CSS berikut untuk sedikit memperindah tampilan.

body {
  font: normal 14px/100% "Andale Mono", AndaleMono, monospace;
  color: #fff;
  padding: 50px;
  width: 300px;
  margin: 0 auto;
  background-color: #374954;
}

.dropdown {
  position: absolute;
  top:50%;
  transform: translateY(-50%);
}

a {
  color: #fff;
}

.dropdown dd,
.dropdown dt {
  margin: 0px;
  padding: 0px;
}

.dropdown ul {
  margin: -1px 0 0 0;
}

.dropdown dd {
  position: relative;
}

.dropdown a,
.dropdown a:visited {
  color: #fff;
  text-decoration: none;
  outline: none;
  font-size: 12px;
}

.dropdown dt a {
  background-color: #4F6877;
  display: block;
  padding: 8px 20px 5px 10px;
  min-height: 25px;
  line-height: 24px;
  overflow: hidden;
  border: 0;
  width: 272px;
}

.dropdown dt a span,
.multiSel span {
  cursor: pointer;
  display: inline-block;
  padding: 0 3px 2px 0;
}

.dropdown dd ul {
  background-color: #4F6877;
  border: 0;
  color: #fff;
  display: none;
  left: 0px;
  padding: 2px 15px 2px 5px;
  position: absolute;
  top: 2px;
  width: 280px;
  list-style: none;
  height: 100px;
  overflow: auto;
}

.dropdown span.value {
  display: none;
}

.dropdown dd ul li a {
  padding: 5px;
  display: block;
}

.dropdown dd ul li a:hover {
  background-color: #fff;
}

button {
  background-color: #6BBE92;
  width: 302px;
  border: 0;
  padding: 10px 0;
  margin: 5px 0;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

Kemudian lanjutkan kembali untuk kode Javascript berikut.

$(".dropdown dt a").on('click', function() {
  $(".dropdown dd ul").slideToggle('fast');
});

$(".dropdown dd ul li a").on('click', function() {
  $(".dropdown dd ul").hide();
});

function getSelectedValue(id) {
  return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function(e) {
  var $clicked = $(e.target);
  if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});

$('.mutliSelect input[type="checkbox"]').on('click', function() {

  var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
    title = $(this).val() + ",";

  if ($(this).is(':checked')) {
    var html = '<span title="' + title + '">' + title + '</span>';
    $('.multiSel').append(html);
    $(".hida").hide();
  } else {
    $('span[title="' + title + '"]').remove();
    var ret = $(".hida");
    $('.dropdown dt a').append(ret);

  }
});

Kalo sudah semua diketikan, coba jalankan dibrowser masing-masing, dan lihat hasilnya. Selesai

Nah itulah tadi bagaimana Cara Membuat Dropdown Multiple Checkbox Dengan Javascript, semoga bermanfaat, sampai ketemu dilain waktu.

Selamat mencoba.