Dhafiq Sagara

Tampilkan postingan dengan label JavaScript. Tampilkan semua postingan

22 Mei 2011

Membuat Drop Down Menu Menggunakan Menu Matic

Membuat drop down menu memanglah suatu hal yang penting untuk mendeklarasikan kategori suatu website atau blog. Karena dengan adanya drop down menu, pengunjung bisa mengetahu subkategori/submenu dari menu utama.
Kali ini saya akan membahas mengenai bagaimana membuat drop down menu dengan menggunakan JQuery MenuMatic.

Pada tahap pertama, buatlah CSS untuk menu. Pada blogspot, anda letakkan code berikut setelah tag <b:skin><![CDATA[ atau letakkan setelah tag </title>

/*menu tengah*/
#navcontainer{
width:857px;
height:38px;
display:block;
overflow:hidden;
padding-left:15px;
background:#E0E0E0 left top repeat-x;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;
border-radius:5px;
margin-left:54px
}

#navcontainer .current-cat a{
background:#1A76B5 left top repeat-x;
color:#FFF
}

#nav a,#subMenusContainer a{
text-decoration:none;
display:block
}

#nav a{
margin:0;
float:left;
background:none;
padding:13px 14px;
color:#1E1E1E;
text-transform:uppercase;
font-weight:bold;
font-size:12px
}

#nav li a:hover,#nav li a:focus,#nav a.mainMenuParentBtnFocused{
background:#1A76B5 left top repeat-x;
color:#fff
}

#subMenusContainer a,#nav li li a{
color:#fff;
font-size:12px;
text-align:left;
background-color:#0F6FB1;
padding:6px 24px;
text-shadow:none
}

#subMenusContainer a:hover,#subMenusContainer a:focus,#subMenusContainer a.subMenuParentBtnFocused{
background:#2092E1;
color:#fff;
text-shadow:none
}

.subMenuParentBtn{
background:url(../img/arrow_right.gif) right center no-repeat
}

.subMenuParentBtnFocused{
background:url(../img/arrow_right_over.gif) right center no-repeat
}

.mainMenuParentBtn{}

.mainMenuParentBtnFocused{}

.smOW{
display:none;
position:absolute;
overflow:hidden;
padding:0 2px;
margin:0 0 0 -2px
}

#nav,#nav ul,#nav ol,#subMenusContainer ul,#subMenusContainer ol{
padding:0;
margin:0;
list-style:none;
line-height:1em
}

#nav ol,#nav ul,#subMenusContainer ul,#subMenusContainer ol{
background:none;left:0
}

#nav li{
background-image:url(../img/mainnav-sep.gif);
background-repeat:no-repeat;
background-position:100% 5px;
cursor:pointer;
float:left;
margin:0 2px 0 0;
padding:0 2px 0 0;
height:38px;
display:inline
}

#subMenusContainer li{
list-style:none
}

#nav{
width:950px;
margin:0 auto;
clear:both;
overflow:hidden;
font-size:12px;
display:block
}

#nav .children{
display:none
}

#subMenusContainer{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:0;
overflow:visible;
z-index:1000000000
}
/*end of menu tengah*/

Pada #navcontainer ada yang perlu disesuaikan aturan:

width untuk panjang menu.
height untuk lebar menu.
padding-left untuk pengaturan posisi tulisan menu yang pertama terhadap posisi paling kiri.
margin-left pengaturan untuk posisi menu dilihat dari sisi kiri.

Pasangkan plugin jQuery MenuMatic pada blog atau website anda. Letakkan code berikut sebelum tag <body> atau setelah tag </head>

<script src='http://www.google.com/jsapi'/><script>google.load('mootools', '1.2.1');</script>


<script src='http://sagaraproject.googlecode.com/files/MenuMatic_0.68.3.js' type='text/javascript'/>


<script type='text/javascript'>
    window.addEvent('domready', function() {
        var myMenu = new MenuMatic();
    });
</script>

Kemudian isikan menu beserta submenunya pada posisi/letak yang anda inginkan (akan tetapi wajib diletakkan di antara tag <body> </body>). Berikut contoh isi menunya:

<div id='navcontainer'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='/search/label/News'>NEWS</a></li>

<li><a href='#'>TUTORIAL</a>
<ul class='children'>
<li><a href='/search/label/Programming'>PROGRAMMING</a>
<ul class='children'>
<li><a href='/search/label/Java'>Java</a></li>
<li><a href='/search/label/PHP'>PHP</a></li>
<li><a href='/search/label/HTML'>HTML</a></li>
<li><a href='/search/label/C/C++'>C/C++</a></li>
<li><a href='/search/label/JavaScript'>JavaScript</a></li>
<li><a href='/search/label/JQuery'>JQuery</a></li>
<li><a href='/search/label/Google API'>Google API</a></li>
<li><a href='/search/label/WAP'>WAP</a></li>
</ul>
</li>
<li><a href='/search/label/Programming'>DATABASE</a>
<ul class='children'>
<li><a href='/search/label/MySQL'>MySQL</a></li>
<li><a href='/search/label/Oracle'>Oracle</a></li>
<li><a href='/search/label/PostgreSQL'>PostgreSQL</a></li>
</ul>
</li>
<li><a href='/search/label/Programming'>SISTEM OPERASI</a>
<ul class='children'>
<li><a href='/search/label/Ubuntu'>Ubuntu</a></li>
<li><a href='/search/label/Tips Trik Windows'>Windows</a></li>
<li><a href='/search/label/Linux Mint'>Linux Mint</a></li>
<li><a href='/search/label/OpenSolaris'>OpenSolaris</a></li>
</ul>
</li>
<li><a href='/search/label/CMS'>CMS</a>
<ul class='children'>
<li><a href='/search/label/Joomla'>Joomla</a></li>
<li><a href='/search/label/Prestashop'>Prestashop</a></li>
<li><a href='/search/label/Mahara'>Mahara</a></li>
</ul>
</li>
</ul>
</li>

<li><a href='/search/label/Download'>DOWNLOAD</a>
<ul class='children'>
<li><a href='/search/label/Software'>Software</a></li>
<li><a href='/search/label/Antivirus'>Antivirus</a></li>
<li><a href='/search/label/Musik'>Musik</a>
<ul class='children'>
<li><a href='/search/label/Kartun'>Kartun</a></li>
<li><a href='/search/label/Jazz'>Jazz</a></li>
<li><a href='/search/label/Video Klip'>Video Klip</a></li>
</ul>
</li>
<li><a href='/search/label/E-Book'>E-Book</a>
<ul class='children'>
<li><a href='/search/label/Android'>Android</a></li>
</ul>
</li>
<li><a href='/search/label/Jurnal'>Jurnal</a></li>
</ul>
</li>

<li><a href='/search/label/Desain'>DESAIN</a>
<ul class='children'>
<li><a href='/search/label/Brosur'>Brosur</a></li>
<li><a href='/search/label/Piagam dan Sertifikat'>Piagam dan Sertifikat</a></li>
<li><a href='/search/label/Poster'>Poster</a></li>
<li><a href='#'>Spanduk</a></li>
</ul>
</li>

</ul>
</div>

SELAMAT MENCOBA. SEMOGA BERMANFAAT.

8 Mei 2011

Memasang Kalendar Pada Web atau Blog

Untuk memasang kalendar pada blog sangat sederhana sekali caranya, ikuti langkah-langkah berikut ini:

Masuk pada desain layout blog anda
Tambahkan Gadget (pada blogspot) atau Widget (pada wordpress)
Pilih yang support HTML/Javascript

Kemudian tambahkan script berikut pada gadget tersebut:

<script src="http://ilmukomputer.org/wp-content/uploads/2011/05/kalender.js"></script>

atau

<script src="http://anasmcguire.googlepages.com/kalender.js"></script>

Kemudian simpan

3 Mei 2011

Membuat Random Post Pada Blogspot

Kadang pemilik blog sering kali melupakan artikel yang telah lama diposting untuk ditampilkan dan justru malah menampilkan daftar artikel yang baru saja diposting (Recent Post). Oleh karena itu, sangat penting untuk menampilkan random post pada bagian sidebar.
Kali ini kita akan belajar bagaimana memasangkan daftar artikel secara random (random post) pada blogger.

Langsung saja, silahkan copy-kan script berikut ini:

<script type="text/javascript">
var randarray = new Array();
var l=0;
var flag;
var numofpost=5;

function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);

for(i=0;i < numofpost;) {
flag=0;
randarray.length=numofpost;
l=Math.floor(Math.random()*total);

for(j in randarray){
if(l==randarray[j]){ 
flag=1;
}
}

if(flag==0&&l!=0){
randarray[i++]=l;
}
}

document.write('<ul>');

for(n in randarray){ 
var p=randarray[n];
var entry=json.feed.entry[p-1];

for(k=0; k < entry.link.length; k++){
if(entry.link[k].rel=='alternate'){
var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);
}
}
}
document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"> </script>

Dan paste pada gadget HTML/Javascript yang ada pada Design Layout blog anda.

Anda bisa mengubah jumlah random post sebanyak yang anda inginkan dengan mengubah value dari variable numofpost.

Code tersebut dapat anda terapkan juga pada blog wordpress ataupun website anda dengan memanfaatkan RSS Feed dari website atau blog anda, sehingga tinggal mengubah Feed Post yang ada pada bagian paling bawah dari script.

Terima kasih kepada Pak Ali (pemilik blog http://kholimi-id.blogspot.com/ yang telah mengajari.

1 Mei 2011

Membuat Link Menjadi Warna-Warni Seperti Pelangi (Rainbow Link) Pada Web Atau Blog

Link Pelangi atau biasa disebut Rainbow Link ini adalah memberikan efek warna-warni terhadap sebuah link jika kursor diarahkan ke link tersebut.

Cara memberikan efek rainbow link ini sangat sederhana, kita menggunakan fungsi javascript.

Berikut cara membuat efek ranbow link:

Cari tag <head>

Kemudian tambahkan syntax berikut dibawah tag <head> tersebut

<script src='http://ilmukomputer.org/wp-content/uploads/2011/04/rainbow.js'></script>

Sehingga contohnya adalah seperti berikut:

<head>
<script src='http://ilmukomputer.org/wp-content/uploads/2011/04/rainbow.js'></script>

Kemudian simpan.

Kemudian silahkan test dengan mengarahkan kursor anda pada sebuah link.

30 Apr 2011

Menghentikan Waktu Tunggu Download Pada 4shared.com

Terlalu lama menunggu waktu download pada 4shared.com? Kadang suka sebel kan mau download masih dikasih waktu tunggu, ya kalo waktunya cuma 10 detik sih gak masalah, kadang ada juga yang waktu tunggunya sampai 320 detik, woooo luar biasa garing nunggunya tuh...

Ada sebuah trik untuk menghentikan atau mempercepat waktu tunggu download pada 4shared.com. Gantikan URL download 4shared dengan kode javascript berikut pada address bar di web browser anda dengan:

javascript:alert(c=0)

Nilai c=0 bisa diganti dengan angka lain jika value tersebut tidak berpengaruh pada 4shared, misal c=1

javascript:alert(c=1)

nilai c itu adalah detik percepatan atau detik penghentian, jika 1 berarti waktu tunggunya tinggal 1 detik, sedangkan jika 0 maka waktu tunggu langsung berhenti. Kode script tersebut ketikkan dan gantikan URL asli 4shared pada address bar web browser.

Berikut waktu tunggu download hingga sampai 320 detik, wooo lamanya....

Gantikan kode javascript pada address bar, kemudian akan muncul prompt alert/peringatan bahwa waktu di set sesuai value c.
Dan waktu akan berhenti seketika, dan anda bisa langsung men-download file di 4shared tanpa menunggu lama.

22 Apr 2011

Membuat Tulisan Terbalik (ʞılɐqɹǝʇ uɐsılnʇ ʇɐnqɯǝɯ)

Tutorial kali ini kita akan membuat Form HTML untuk konversi dari tulisan normal menjadi tulisan terbalik, dan sebaliknya dari tulisan terbalik ke tulisan normal.

Tulisan-tulisan terbalik itu bisa kita pakai untuk update status di facebook, twitter, ataupun kita bisa posting artikel diblog pakai tulisan terbalik. Kan seru tuh bisa bikin orang yang baca jadi pusing. hehehe... :D

lɐɯɹou ıpɐɾuǝɯ ıuı uɐsılnʇ ʇɹǝʌuoɔ-ƃuǝɯ ɐuɐɯıɐƃɐq ɐpuɐ ɐpɐd uɐʞɹɐɾɐƃuǝɯ uɐʞɐ ɐʎɐs ıuısıp ɐuǝɹɐʞ nlɹǝd ʞɐpıʇ nʇı ¿ɐpuɐ ɹoʇıuoɯ ɹɐʎɐl ɹɐʇnɯǝɯ snɹɐɥ ɥɐʞɐdɐ ˙ıuı ʞılɐqɹǝʇ ɐɹɐɔǝs uɐsılnʇ ɐɔɐqɯǝɯ uɐʞ ɥɐsns ıʇsɐd ¿ıuı ʞılɐqɹǝʇ uɐsılnʇ ɐɔɐqɯǝɯ ɐsıq ɐpuɐ ɥɐʞɐdɐ

bingung ya membaca tulisan itu? nih saya translate:

apakah anda bisa membaca tulisan terbalik ini? pasti susah kan membaca tulisan secara terbalik ini. apakah harus memutar layar monitor anda? itu tidak perlu karena disini saya akan mengajarkan pada anda bagaimana meng-convert tulisan ini menjadi normal

Baiklah langsung saja saya tampilkan source code untuk membuat web HTML untuk membuat tulisan terbalikdan mengkonversi dari tulisan terbalik ke tulisan normal. Berikut source codenya, silahkan copy-paste pada notepad dan simpan dengan format .HTML.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Form Pembuat Tulisan Terbalik</title>
<script language="JavaScript">
function flip() {
var result = flipString(document.f.original.value.toLowerCase());
document.f.flipped.value = result;
}
function flipString(aString) {
var last = aString.length - 1;
var result = new Array(aString.length)
for (var i = last; i >= 0; --i) {
var c = aString.charAt(i)
var r = flipTable[c]
result[last - i] = r != undefined ? r : c
}
return result.join('')
}
var flipTable = {
a : '\u0250',
b : 'q',
c : '\u0254',
d : 'p',
e : '\u01DD',
f : '\u025F',
g : '\u0183',
h : '\u0265',
i : '\u0131',
j : '\u027E',
k : '\u029E',
//l : '\u0283',
m : '\u026F',
n : 'u',
r : '\u0279',
t : '\u0287',
v : '\u028C',
w : '\u028D',
y : '\u028E',
'.' : '\u02D9',
'[' : ']',
'(' : ')',
'{' : '}',
'?' : '\u00BF',
'!' : '\u00A1',
"\'" : ',',
'<' : '>',
'_' : '\u203E',
'\\' : '/',
';' : '\u061B',
'\u203F' : '\u2040',
'\u2045' : '\u2046',
'\u2234' : '\u2235'
}
for (i in flipTable) {
flipTable[flipTable[i]] = i
}
</script>
</head>

<body>
<form name="f">
<p>Tulisan Asli: </p>
<textarea rows="6" cols="50" name="original" onkeyup="flip()"></textarea>

<p>Tulisan Terbalik: </p>
<textarea rows="6" cols="50" name="flipped"></textarea>
</form>
</body>
</html>

21 Apr 2011

Dual Screen Dalam Satu Tab Web Browser Pada Mozilla Firefox

Dual screen dalam satu tab web browser ini yaitu suati trik agar kita bisa membuka 2 alamat website sekaligus dalam 1 tab.

Misalkan kita membaca-baca artikel blog dhafiq sagara dan sekaligus membuka google untuk browsing. Kita tidak perlu repot-repot membuka 2 tab, dalam 1 tab ini kita bisa membuka 2 alamat website tersebut secara bersamaan. INGAT!! Trik ini hanya untuk web browser Mozilla Firefox.

Langsung saja buka mozilla firefox-mu.

Kemudian masukkan javascript berikut ke address bar browser mozilla-mu:

javascript:finderonly=location.href;int3rnet=prompt('Masukkan%20URL%201',finderonly);brows3r=prompt('Masukkan%20URL%202',int3rnet);if(int3rnet&&brows3r){F1nd='<frameset%20cols=\'*,*\'>\n<frame%20src=\''+int3rnet+'\'/>';F1nd+='<frame%20src=\''+brows3r+'\'/>\n';F1nd+='</frameset>';with(document){write(F1nd);void(close())}}else{void(null)}

Akan muncul pesan Masukkan URL 1, masukkan alamat website yang akan dituju, misal: http://www.google.com/ dan Enter. (INGAT!! Dalam memasukkan URL, ketikkan alamat lengkap, jangan cuma google.com, jadi harus lengkap menggunakan http://www.google.com/)
Kemudian muncul pesan lagi Masukkan URL 2, masukkan alamat website kedua yang akan dituju, misal: http://dhafiq-san.blogspot.com/ kemudian Enter. (INGAT!! Dalam memasukkan URL, ketikkan alamat lengkap, jangan cuma dhafiq-san.blogspot.com, jadi harus lengkap menggunakan http://dhafiq-san.blogspot.com/)

Setelah mengikuti langkah-langkah di atas, maka tampilan browser mozilla firefox-mu seperti gambar berikut:

20 Apr 2011

Redirect Page Menggunakan Javascript

Jika pada artikel sebelumnya saya membahas mengenai Redirect Page Menggunakan Meta-Tags, kini kita membahas dengan topik yang sama tapi beda cara yaitu Redirect Page Menggunakan Javascript.

Fungsi javascript yang dipakai untuk redirect page menggunakan window.location. Dan kita bisa menentukan lokasi redirect yang dituju dengan menentukan waktu tertentu untuk me-redirect page.

Berikut syntax javascript untuk redirect page dan letakkan pada halaman body, yaitu antara tag <body> dan </body>:

<script language="JavaScript">
    var time = null
    function move() {
    window.location = 'index.php'
    }
</script>

Kemudian ubah tag <body> menjadi seperti berikut:

<body onload="timer=setTimeout('move()',2000)">

Yang berarti bahwa halaman akan di redirect dalam waktu 2000mili second = 2 second ke halaman index.php. Anda dapat mengubah waktu redirect tersebut dalam satuan mili second.

7 Des 2010

Membuat Update Status Twitter Menggunakan JQuery

Udah pada tau kan bagaimana model update status yang ada di twitter? Pernah terbayang untuk membuatnya? Langsung aja deh saya share bagaimana membuat web sederhana untuk update status seperti tampilan twitter.

Aplikasi web sederhana ini memanfaatkan jQuery. Sehingga fungsi yang ada di jQuery tersebut tinggal kita panggil di halaman HTML.

Silahkan download source code lengkap update status (source ilmukomputer.com) atau Update-Status.zip (google source)

Berikut tampilannya jika telah meng-update status

Silahkan kalian kembangkan berdasarkan kreasi kalian sendiri. Ini hanya sekedar contoh sederhana.

Semoga bermanfaat...!!!

14 Nov 2010

HTML - Select All dan Unselect All Checkbox (Versi 2)

Jika pada tulisan saya mengenai select dan unselect all checkbox versi 1 menggunakan button, pada tulisan yang versi 2 ini menggunakan data dalam tabel. Sehingga bisa diterapkan untuk data-data dari database. Disini saya hanya menjelaskan pembuatan pada fungsi HTML biasa.

Bagaimana penerapannya, silahkan ikuti langkah-langkahnya berikut:

Fungsi berikut diterapkan berdasarkan data dalam tabel. Hanya menggunakan fungsi checkbox untuk select dan unselect all item.
Berikut code HTMLnya:

<html>
<head>
<title>Select and Unselect Checkbox</title>
</head>
<script>
        function CheckAll(){
                if(document.form1.chkAll.checked == true){
                    for(var j = 0; j < document.form1.length; j++){
                        if(document.form1.elements[j].name == "chk[]"){
                            document.form1.elements[j].checked = true;
                        }
                    }
                }
                else if(document.form1.chkAll.checked == false){
                    for(var j = 0; j < document.form1.length; j++){
                        if(document.form1.elements[j].name == "chk[]"){
                            document.form1.elements[j].checked = false;
                        }
                    }
                }
            }
        </script>
<body>
<form name="form1" method="post" action="delete-kategory.php">
<table border="1">
    <tr>
       <th width="33"><input name="chkAll" type="checkbox" id="chkAll" value="1" onClick="CheckAll();"></th>
       <th width="100">Nama</th>
       <th width="100">Alamat</th>
       <th width="100">No.Telp</th>
       <th width="100">Tgl.Lahir</th>
    </tr>
    <tr>
       <td width="33" align="center"><input type="checkbox" name="chk[]"/></td>
       <td width="100" align="center">Nama 1</td>
       <td width="100" align="center">Alamat 1</td>
       <td width="100" align="center">No.Telp 1</td>
       <td width="100" align="center">Tgl.Lahir 1</td>
    </tr>
    <tr>
       <td width="33" align="center"><input type="checkbox" name="chk[]"/></td>
       <td width="100" align="center">Nama 2</td>
       <td width="100" align="center">Alamat 2</td>
       <td width="100" align="center">No.Telp 2</td>
       <td width="100" align="center">Tgl.Lahir 2</td>
    </tr>
    <tr>
       <td width="33" align="center"><input type="checkbox" name="chk[]"/></td>
       <td width="100" align="center">Nama 3</td>
       <td width="100" align="center">Alamat 3</td>
       <td width="100" align="center">No.Telp 3</td>
       <td width="100" align="center">Tgl.Lahir 3</td>
    </tr>
    <tr>
       <td width="33" align="center"><input type="checkbox" name="chk[]"/></td>
       <td width="100" align="center">Nama 4</td>
       <td width="100" align="center">Alamat 4</td>
       <td width="100" align="center">No.Telp 4</td>
       <td width="100" align="center">Tgl.Lahir 4</td>
    </tr>
    <tr>
       <td width="33" align="center"><input type="checkbox" name="chk[]"/></td>
       <td width="100" align="center">Nama 5</td>
       <td width="100" align="center">Alamat 5</td>
       <td width="100" align="center">No.Telp 5</td>
       <td width="100" align="center">Tgl.Lahir 5</td>
    </tr>
    <tr>
       <td width="33" align="center"><input type="checkbox" name="chk[]"/></td>
       <td width="100" align="center">Nama 6</td>
       <td width="100" align="center">Alamat 6</td>
       <td width="100" align="center">No.Telp 6</td>
       <td width="100" align="center">Tgl.Lahir 6</td>
    </tr>
</table>
</form>
</body>
</html>

Simpan dengan format .html

Tampilannya seperti berikut:

HTML - Select All dan Unselect All Checkbox (Versi 1)

Pada HTML terdapat fungsi checkbox untuk memilih item lebih dari satu. Berbeda dengan radio button yang hanya menentukan satu pilihan item saja.

Jika item yang ada itu berjumlah ratusan, apakah tidak kerepotan jika harus menseleksi semua item tersebut satu-satu. Untuk melakukan tersebut, buatlah fungsi untuk dapat memilih semua item dan meng-unselect semua item.

Fungsi berikut diterapkan dengan menggunakan tombol button.
Berikut code HTMLnya:

<html>
<head>
<title>Select and Unselect Checkbox</title>
</head>
<body>
<script type="text/javascript">
function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
    if(!document.forms[FormName])
        return;
    var objCheckBoxes = document.forms[FormName].elements[FieldName];
    if(!objCheckBoxes)
        return;
    var countCheckBoxes = objCheckBoxes.length;
    if(!countCheckBoxes)
        objCheckBoxes.checked = CheckValue;
    else
        // set the check value for all check boxes
        for(var i = 0; i < countCheckBoxes; i++)
            objCheckBoxes[i].checked = CheckValue;
}
</script>

<form method="GET" action="page17.php" name="myForm" onsubmit="return false;">
<label for="myCheckbox1">
<input name="myCheckbox" value="1" id="myCheckbox1" type="checkbox">
Option 1 </label>
<br>
<label for="myCheckbox2"><input name="myCheckbox" value="2" 
id="myCheckbox2" type="checkbox">
Option 2</label>
<br>
<label for="myCheckbox3"><input name="myCheckbox" value="3" 
id="myCheckbox3" type="checkbox">
Option 3</label>
<br><input onclick="SetAllCheckBoxes('myForm', 'myCheckbox', true);" 
value="Select All Item" type="button">
&nbsp;&nbsp;
<input onclick="SetAllCheckBoxes('myForm', 'myCheckbox', false);" 
value="Unselect All Item" type="button">
</form>
</body>
</html>

Simpan dengan format .html

Tampilannya adalah seperti berikut ini: