Monday, March 29, 2010

Javascript Checkbox Checked / Javascript Check All Checkbox

Diposkan oleh di Label: , , , , , , , ,
Kalian tahu kan fungsi checkall? Yupz, ini adalah fungsi yang digunakan untuk mencentang semua kolom cek list ataupun sebaliknya untuk menghilangkan semua centang yang ada pada kolom cek list. Untuk membuat fungsi ini kita hanya memerlukan sebuah script javascript yang digunakan untuk mencentang semua cek list maupun menghilangkan semua centang pada cek list.
Secara keseluruhan script tersebut seperti dibawah ini:

<html>
<body>
<center>
<table border="1px" width="180">
<tr>
<td>
<ul>
<li>
<input type="checkbox" name="check_ctrl" onClick="Check(document.myform.check_list)" /> <b id=message>Check All</b>
</li>
<li><input type="button" name="button" id="button" onClick="Check(document.myform.check_list)" value="Check All" /></li>
</ul>
<hr>
<ol>
<li><input type="checkbox" name="check_list" value="1"> ASP</li>
<li><input type="checkbox" name="check_list" value="2"> PHP</li>
<li><input type="checkbox" name="check_list" value="3"> JavaScript</li>
<li><input type="checkbox" name="check_list" value="4"> HTML</li>
<li><input type="checkbox" name="check_list" value="5"> MySQL</li>
</ol>
</td>
</tr>
</table>
</form>
<script type="text/javascript" language="javascript">
<!--
function Check(chk)
{
if(document.myform.check_ctrl.checked==true || document.getElementById("button").value=="Check All")
{
for(i=0;i<chk.length;i++)
chk[i].checked=true ;
document.getElementById("message").innerHTML="UnCheck All";
document.getElementById("button").value="UnCheck All";
}
else
{
for(i=0;i<chk.length;i++)
chk[i].checked=false;
document.getElementById("message").innerHTML="Check All";
document.getElementById("button").value="Check All";
}
}
//-->
</script>
</center>
</body>
</html>



Untuk melihat demonya silahkan kunjungi:
[Demo @ catment.co.cc/demo/checkall]
Download scriptnya:
http://catment.co.cc/download/check_all.zip
No comments:

Membuat Link tanpa garis bawah dengan CSS

Diposkan oleh di Label: , ,

Sebelumnya saya sudah pernah menulis tentang CSS atau Cascading Style Sheet. Tapi kali ini saya akan sharing trik penggunaan script CSS untuk menghilangkan garis bawah pada Link Text, dan menhhilangkan border pada Link Gambar.

Menghilangkan Garis Bawah Semua Link pada Halaman Web

Pada dasarnya sebuah link otomatis akan mempunyai garis bawah. Tapi dengan menggunakan CSS/Cascading Style Sheet, garis bawah itu bisa dihilangkan dengan mudah. Caranya, tempatkan script CSS berikut di bagian <head>...</head> halaman web yang Anda buat (bersama title, description, dan keyword). Dengan menggunakan kode ini, garis bawah pada seluruh link di halaman web Anda akan hilang.


<html>

<head>

<title>menghilangkan garis bawah pada link</title>

<style type="text/css">

a {text-decoration:none;}

</style>

</head>

<body>

<a href=" http://catment.blogspot.com">Link belajar web programing</a>

</body>

</html>



Menghilangkan Garis Bawah Sebagian Link pada Halaman Web

Jika hanya ingin menghilangkan garis bawah pada link-link tertentu, bukan pada seluruh link seperti yang terjadi kalau memakai kode di atas, anda dapat menyisipkan kode script ke dalam style Link atau memanggilnya dengan class. Contoh dan kodenya seperti yang berikut ini.


<html>

<head>

<title>menghilangkan garis bawah pada link</title>

</head>

<body>

<a href=" http://catment.blogspot.com" style="text-decoration:none;">Link belajar web programing</a>

</body>

</html>


Atau


<html>

<head>

<title>menghilangkan garis bawah pada link</title>

<style type="text/css">

.tanpaGarisBawah {text-decoration:none;}

</style>

</head>

<body>

<a href="http://catment.blogspot.com" class="tanpaGarisBawah">Link belajar web programing</a>

</body>

</html>



Menghilangkan Border Semua Link Gambar pada Halaman Web

Pada dasarnya apabila kita membuat Link Gambar akan terdapat border di sekeliling gambar yang di buat Link, tapi ada sebagian browser yang tidak memunculkan border tersebut. Apabila anda pengguna Opera dan Firefox, border tersebut muncul pada browser Opera dan Firefox. Dengan CSS border tersebut dapat dihilangkan,caranya sisipkan kode CSS ke tag <head>...</head>.contoh scriptnya sebagai berikut:


<html>

<head>

<title>menghilangkan garis bawah pada link</title>

<style type="text/css">

img {border:0;}

</style>

</head>

<body>

<a href="catment.blogspot.com"><img src="catment.jpg" /></a>

</body>

</html>


Menghilangkan Border tertentu pada Link Gambar pada Halaman Web

Anda juga bisa menghilangkan border di bagian Link gambar tertentu saja, caranya sama denga menghilangkan garis pada Text Link tertentu di atas yaitu dengan cara menyisipkan sript CSS pada tag <img>. Untuk contoh bisa di lihat pada script di bawah ini:


<html>

<head>

<title>menghilangkan garis bawah pada link</title>

</head>

<body>

<a href="catment.blogspot.com"><img src="catment.jpg" style="border:0;" /></a>

</body>

</html>


No comments:
Subscribe to: Posts (Atom)