Membuat Multiple Select Checkbox dengan jQuery

Membuat Multiple Select Checkbox dengan jQuery

Membuat Multiple Select Checkbox dengan jQuery
Membuat Multiple Select Checkbox dengan jQuery

Hallo sahabat, kembali lagi dengan admin, sudah lama admin tidak memberikan tutorial pemrgoraman, pada artikel kali ini admin akan memberikan Cara Membuat Multiple Select Checkbox dengan jQuery, dimana dalam membuat checkbox multiple select ini admin tidak menggunakan PHP karena hanya penerapan dasarnya untuk pengaplikasiannya silahkan kalian coba sendiri, untuk fungsi yang digunakan admin menggunakan JQuery dan untuk style nya admin menggunakan CSS nah penggunaan fungsi multiple select checkbox ini mempermudah kalian jika ingin menginput data atau apapun itu, tanpa memilih data satu persatu, yang membuat kalian memakan waktu.

Untuk preview program nya yang dimaksud multiple select checkbox seperti apa kalian bisa lihat dibawah ini.



Membuat Multiple Select Checkbox dengan jQuery

 Pertama admin telah membuat seluruh struktur menggunakan tag <dl> <dt> <dd> dan menempatkan daftar item di dalamnya yang menggunakan tag < ul > & < li > HTML.

Dan admin juga menggunakan CSS untuk menempatkan semua elemen di tempat yang tepat, seperti yang Anda lihat di pratinjau. Di dalam daftar item, admin juga menempatkan kotak centang dengan CSS admin telah menata dengan baik. Dalam program ini, CSS memiliki bagian minim karena ini hanyalah contoh tidak untuk show off hehehehe.

Dan untuk jQuery di sini fitur utama dalam membuat program ini, karena seluruh program didasarkan pada pustaka itu. jQuery beralih di kelas CSS dan menambahkan elemen HTML secara dinamis. admin tidak bisa menjelaskan semuanya secara tertulis.

Untuk membuat program ini, kalian harus membuat 3 file. Pertama untuk HTML , kedua untuk CSS, dan yang ketiga untuk JavaScript . Ikuti langkah-langkah untuk membuat ini tanpa kesalahan. btw ini hanya contoh jadi hanya 3 file, sisahnya kalau langsung di terapkan di program kalian, ya aplikasikan sendiri loh ya,

Buat file HTML bernama index.html dan masukkan kode-kode ini di bawah ini.

<!DOCTYPE html>
<!--Code By RuangCoder ( https://www.ruangcoder.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Multiple Checkbox Dropdown | RuangCoder.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel="stylesheet" href="style.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>
<body>

    <dl class="dropdown"> 
  
    <dt>
    <a href="#">
      <span class="hida">Select</span>    
      <p class="multiselct"></p>  
    </a>
    </dt>
  
    <dd>
        <div class="mutliSelect">
            <ul>
                <li>
                    <input type="checkbox" value="HTML 5" />HTML 5</li>
                <li>
                    <input type="checkbox" value="CSS 3" />CSS 3</li>
                <li>
                    <input type="checkbox" value="JavaScript" />JavaScript</li>
                <li>
                    <input type="checkbox" value="React JS" />React JS</li>
                <li>
                    <input type="checkbox" value="Angular" />Angular</li>
                <li>
                    <input type="checkbox" value="Vue JS" />Vue JS</li>
            </ul>
        </div>
    </dd>
  <button>Submit</button>
</dl>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>
Sekarang buat file CSS bernama style.css dan masukkan kode yang diberikan di sini.

/* Code By RuangCoder ( https://www.ruangcoder.com ) */
body {
  font: normal 14px/100% "Andale Mono", AndaleMono, monospace;
  color: #fff;
  padding: 50px;
  width: 300px;
  margin: 0 auto;
  background-color: #4d4d4d;
}
.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: #2e5e68;
  display: block;
  padding: 8px 20px 5px 10px;
  min-height: 25px;
  line-height: 24px;
  overflow: hidden;
  border: 0;
  width: 272px;
}
.dropdown dt a span,
.multiselct span {
  cursor: pointer;
  display: inline-block;
  padding: 0 3px 2px 0;
}
.dropdown dd ul {
  background-color: #2e5e68;
  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: #2ab1ce;
  width: 302px;
  border: 0;
  padding: 10px 0;
  margin: 5px 0;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

Langkah terakhir, buat file JavaScript bernama function.js dan masukkan kodenya.

// Code By RuangCoder ( https://www.ruangcoder.com )
$(".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>';
    $('.multiselct').append(html);
    $(".hida").hide();
  } else {
    $('span[title="' + title + '"]').remove();
    var ret = $(".hida");
    $('.dropdown dt a').append(ret);

  }
});

Nah sekarang kalian sudah berhasil membuat Membuat Multiple Select Checkbox dengan jQuery semoga bermanfaat ya, mungkin artikel nya sampai sini saja dulu, terimakasih sudah berkunjung dan jangan bosan bosan berkunjung yaaa..

Anda mungkin menyukai postingan ini