Mengenal Fungsi checked Selector Checkbox Pada jQuery
Halo teman – teman semuanya, selamat datang di blog tips dan trik Source Code Aplikasi. Jumpa kembali pada tips dan trik seputar dunia blog, di pertemuan sebelumnya kita telah belajar mengenai Menggunakan Selector Input jQuery Dengan Simbol dimana pembahasan mengenai selector input dengan simbol. Dan di hari ini kita pun akan belajar mengenai Mengenal Fungsi checked Selector Checkbox Pada jQuery dimana guna ini akan bermanfaat bagi tampilan sebuah checked dan unchecked. Kita akan membangun sebuah kondisi dari banyaknya input checkbox dan akan dihitung dari banyaknya checklist nya. Di bawah ini ialah contoh output nya
Sekiranya seluruh di uncheck karenanya ada pemberitahuan total nilai menurut checkbox yang di checklist, dari hasil latihan kali ini saya berharap teman – teman dapat berorientasi mungkin dapat dikerjakan guna like seperti di youtube, facebook atau yang lainnya. Oke seketika 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 Guna checked Selector Checkbox Di 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 bila di klik karenanya akan di hitung total checkbox yang di checklis, teman – teman load terlebih dahulu library jQuery nya di pada 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>
Sekiranya telah save dan jalankan di browsernya, karenanya hasilnya telah seperti demo gambar di atas, Oke demikian di artikel kali ini mengenai Mengenal Fungsi checked Selector Checkbox Pada jQuery kita jumpa kembali di tips dan trik yang akan datang. Terimakasih dan Hingga Jumpa.
Sumber https://kursuswebsite.org
