Mengubah Background Menggunakan Checkbox Javascript

April 12th, 2012

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 :)

This entry was posted on Thursday, April 12th, 2012 at 04:05 and is filed under Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

3 Responses to “Mengubah Background Menggunakan Checkbox Javascript”

  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. Betsy Says:

    The honesty of your psotnig is there for all to see

  3. javaziez Says:

    thanks

Leave a Reply

*