Javaziez

All About Code

Mengubah Background Menggunakan Checkbox Javascript

Form isian dalam sebuah website adalah sesuatu yang pasti ada dan penting tentunya apalagi jika membutuhkan interaksi dengan pengguna. Kali ini kita akan mencoba membuat sebuah isian dimana kita bisa memilih satu atau lebih pilihan yang disajikan dalam sebuah list/tabel menggunakan checkbox. Namun terkadang jadi bosan bahkan bingung ketika pilihannya yang begitu banyak, kita harus hati2 dalam memilih pilihan kita. Disini kita akan mencoba membuat dimana jika setiap pilihan yang terpilih menggunakan checkbox, maka baris dari pilihan itu akan berubah warna latarnya atau sering kita sebut background color.

Berikut kode lengkapnya tanpa sedikitpun kode php tertera di dalamnya.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Checklist Ubah Background</title>

<script type="text/javascript">
function ubah_warna(warna)
{
var latar = document.getElementById(warna).style.backgroundColor;

if(latar!="white")
document.getElementById(warna).style.backgroundColor = "white";
else
document.getElementById(warna).style.backgroundColor = warna;

}
</script>

</head>

<body>

<h1>Pilih Warna Pilihan Anda</h1>
<form name="form_warna" action="#" method="post">
<table width="50%" border="1px">
<tr id="green" style="background-color:white;">
<td width="10%">1.</td>
<td width="80%">Hijau</td>
<td width="10%"><input type="checkbox" name="warna[]" value="green" onclick="ubah_warna(this.value);" /></td>
</tr>
<tr id="blue" style="background-color:white;">
<td>2.</td>
<td>Biru</td>
<td><input type="checkbox" name="warna[]" value="blue" onclick="ubah_warna(this.value);" /></td>
</tr>
<tr id="yellow" style="background-color:white;">
<td>3.</td>
<td>Kuning</td>
<td><input type="checkbox" name="warna[]" value="yellow" onclick="ubah_warna(this.value);" /></td>
</tr>
<tr id="orange" style="background-color:white;">
<td>4.</td>
<td>Orange</td>
<td><input type="checkbox" name="warna[]" value="orange" onclick="ubah_warna(this.value);" /></td>
</tr>
</table>

<input type="submit" name="btn_submit" value="Simpan" />

</form>

</body>
</html>

 

Kita jelaskan setiap barisnya.

Kita terlebih dahulu ke baris dimana kita membuat sebuah baris pilihan yang terdapat sebuah checkbox yang akan memanggil fungsi javascript-nya.

<tr id="green" style="background-color:white;">
<td width="10%">1.</td>
<td width="80%">Hijau</td>
<td width="10%"><input type="checkbox" name="warna[]" value="green" onclick="ubah_warna(this.value);" /></td>
</tr>

Pada penulisan di dalam tag “tr” (<tr>), kita berikan sebuah ID dengan nama backgroud sesuai yang ingin kita ubah backgroundnya ketika dipilih. Ini juga untuk menandakan kepada javascript, mana baris yang akan diubah background-color nya.

Selain itu, pada tag “tr” terdapat style dengan nilai background-color “white”. Ini adalah sebuah default yang harus kita berikan dimana baris tersebut akan berwarna latar putih ketika page di load. Jika tidak, maka javascript tidak mengenali warna latarnya alias masih null. Pemberian awal warna ini pula untuk membantu ketika pilihan yang sudah dipilih jika di check kembali, maka warna kembali berlatar warna putih.

Pada input type checkbox, diberikan name “warna[]“, ini untuk memudahkan proses input jika kita hendak melanjutkan prosesnya.

Pada event onclick, dipanggil fungsi “ubah_warna()” dengan parameter “this.value” yang artinya parameter yang dikirim adalah nilai dari input checkbox itu sendiri dimana nilainya yang tertera di atas adalah “green”.

Selanjutnya kita ke kode javascript-nya.

 

<script type="text/javascript">
function ubah_warna(warna)
{
var latar = document.getElementById(warna).style.backgroundColor;

if(latar!="white")
document.getElementById(warna).style.backgroundColor = "white";
else
document.getElementById(warna).style.backgroundColor = warna;

}
</script>

Parameter “this.value” yang tadi pada fungsi di atas berubah nama menjadi “warna”.

Sebelumnya, background-color baris yang dipilih kita ambil dan disimpan di variable “latar”.

Kita lakukan pengecekan kondisi, jika warna latar sebelumnya bukan berwarna putih (white) yang artinya pilihan tersebut sedang terpilih, maka warna latar akan diberikan warna putih yang artinya pilihan tersebut sedang di uncheck (tidak dipilih).

Jika warna latar sebelumnya berwarna putih yang artinya pilihan sedang tidak dipilih, maka warna latar pilihan tersebut akan berwarna sesuai parameter atau nilai dari checkbox yang dipilih/check.

 

Masih belum jelas? Silahkan berikan masukan atau pertanyaan dengan comment di bawah sini.

Terima kasih, semoga membantu :)

Incoming search terms:

5 Responses so far.

  1. Mimi says:

    写的不是太好啊。 function AllQuery() { var checkBox=document.getElementById(“QueryAll”); var checkBoxAll=document.getElementsByTagName(“input”); for(var i = 0 ; i < checkBoxAll.length ; i++) { if(checkBoxAll[i].type == “checkbox”) { checkBoxAll[i].checked = checkBox.checked; } } }这样一个方法就可以了

  2. ongen says:

    bagaimana iimplementasinya degan sql?


CAPTCHA Image
*

Subscribe to email feed

  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube

Tutorial Membuat Apl

Tahun 2012, tahun terakhir saya membuat artikel di blog ini ...

Koneksi PHP 5.3 ke S

Ketika kita terbiasa menggunakan XAMPP, adakalanya ketika kita diharuskan membuat ...

SQLSRV di PHP 5.4

Sudah menggunakan PHP versi 5.4 keatas? Bagi pengembang aplikasi mungkin ...

WampServer 2.2 (WAMP

Sudah lama Wamp yang saya gunakan tidak diupdate, saya mencoba ...

Install Ubuntu 12.04

Install Ubuntu 12.04 menggunakan CD Sudah lama tidak update Ubuntu, saya ...