Halo teman – teman semuanya, selamat datang di website tips dan trik Dumet School. Jumpa kembali dalam tips dan trik seputar dunia website, pada pertemuan sebelumnya kita sudah belajar tentang Menggunakan Selector Input jQuery Dengan Simbol dimana pembahasan mengenai selector input dengan simbol. Dan pada hari ini kita juga akan belajar tentang Mengenal Fungsi checked Selector Checkbox Pada jQuery dimana fungsi ini akan berguna untuk tampilan sebuah checked dan unchecked. Kita akan membuat sebuah kondisi dari banyaknya input checkbox dan akan dihitung dari banyaknya checklist nya. Di bawah ini adalah contoh output nya
Jika semua di uncheck maka ada pemberitahuan total nilai berdasarkan checkbox yang di checklist, dari hasil latihan kali ini saya berharap teman – teman bisa berorientasi mungkin bisa dibuat fungsi like seperti pada youtube, facebook atau yang lainnya. Oke langsung saja kita implementasikan Mengenal Fungsi checked Selector Checkbox Pada jQuery teman – teman siapkan text editornya dan copy script html di bawah ini
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mengenal Fungsi checked Selector Checkbox Pada jQuery</title>
</head>
<body>
<form>
<input type="checkbox" name="like">
<input type="checkbox" name="like">
<input type="checkbox" name="like">
<input type="checkbox" name="like">
<input type="checkbox" name="like">
</form>
<span></span>
</body>
</html>
Kemudian save dengan nama index.html, dan yang berikutnya kita berikan css nya
<style>
span {
color: green;
}
</style>
Nah baru kita masukkan kondisi jika di klik maka akan di hitung total checkbox yang di checklis, teman – teman load terlebih dahulu library jQuery nya di dalam tag head
https://code.jquery.com/jquery-1.10.2.js
Kemudian berikan script jQuery nya
<script>
var countChecked = function() {
var n = $( "input:checked" ).length;
$( "span" ).text( n + (n === 1 ) + "Yang Di Checklist" );
};
countChecked();
$( "input[type=checkbox]" ).on( "click", countChecked );
</script>
Jika sudah save dan jalankan pada browsernya, maka hasilnya sudah seperti demo gambar di atas, Oke sekian pada artikel kali ini tentang Mengenal Fungsi checked Selector Checkbox Pada jQuery kita jumpa kembali pada tips dan trik yang akan datang. Terimakasih dan Sampai Jumpa.
The post Mengenal Fungsi checked Selector Checkbox Pada jQuery appeared first on Kursus Website Terbaik.