HIMPUNANJAVASCRIPT

kategori skrip
:: permainan
:: navigasi
:: semakan input
:: tarikh dan masa
:: lain-lain

komuniti
.. artikel
.. sumbangan
.. sumber rujukan
.. penulis

semakan input | check semua checkbox

Kotak check (checkbox) membolehkan pengguna membuat memilih nilai yang disediakan dengan menandakan(check) pada kotak check tersebut. sekiranya pengguna ingin memilih semua nilai yang disediakan, mereka perlu menandakan kotak check itu satu persatu. Gunakan skrip berikut untuk memudahkan pengguna memilih semua nilai kotak check.
hasil kiriman: Khairul Khazimah Mohd Yusoff

Kod Contoh

Salin skrip di bawah (klik pilih semua, klik kanan pada skrip dan pilih Copy) dan tampalkan di dalam perisian editor HTML anda (Notepad atau Frontpage). Simpan fail sebagai cbox.htm.

<html>
<script language="javascript">
<!--
function check() {
	for (i = 0; i < document.form1.C1.length; i++) {
	document.form1.C1[i].checked = true;}
}

function uncheck() {
	for (i = 0; i < document.form1.C1.length; i++) {
	document.form1.C1[i].checked = false;}
}

// -->
</script>
<body>
<form name="form1" onsubmit="return mesej(document.form1.nama)">
 
<div align="center">
  <center>
  <table border="0" width="300" cellspacing="0" cellpadding="0">
    <tr>
      <td width="50%"><input type="checkbox" name="C1" value="ON">Pilihan satu</td>
      <td width="50%"></td>
    </tr>
    <tr>
      <td width="50%"><input type="checkbox" name="C1" value="ON">Pilihan dua</td>
      <td width="50%"></td>
    </tr>
    <tr>
      <td width="50%"><input type="checkbox" name="C1" value="ON">Pilihan tiga</td>
      <td width="50%"></td>
    </tr>
    <tr>
      <td width="50%"><input type="checkbox" name="C1" value="ON">Pilihan empat</td>
      <td width="50%"></td>
    </tr>
    <tr>
      <td width="50%" height="20"></td>
      <td width="50%"></td>
    </tr>
    <tr>
      <td width="50%"><a href="javascript: check()" return false;>pilih semua</a></td>
      <td width="50%"><a href="javascript: uncheck()" return false;>batal pilihan</a></td>
    </tr>
    <tr>
      <td width="50%"></td>
      <td width="50%"></td>
    </tr>
    <tr>
      <td width="50%"></td>
      <td width="50%"></td>
    </tr>
  </table>
  </center>
</div>
</form>
</html>