Page 1 of 1

facing problem with check all and uncheck all box

Posted: Thu Jul 21, 2011 11:31 am
by nurulnadiah89
hi guys,

i'm nurul...need ur help here..
i'm using dreamweaver cs5 and i have created a page that have a table that can check or uncheck certain option in each row..
in every column,there is a main button (i'm planning to add function in the main button to be check all or uncheck all - but i did not managed to do it right...there are errors)

For example:

Pulau Pinang button, when user click, it will check/uncheck all option under Pulau Pinang...same goes to other columns. After selecting their option, user can submit their option using submit button (option chosen can be in different columns). Unfortunately, i've tried to fix da problem but it seems that i really need someone to help me on this.

my problem is, my submit and reset button is not functioning besides, i'm not able to make the main button to check or uncheck all option..
Below is my coding for ur reference:

Code: Select all

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
	background-image: url(images/crop.jpg);
	margin-left: 130px;
	margin-top: 60px;
	margin-right: 130px;
	margin-bottom: 100px;
	background-color: #FFF;
}
body,td,th {
	font-size: 14px;
	color: #000;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onload="MM_preloadImages('images/anigif.gif')">
<table width="1006" height="352" border="1">
  <tr>
    <td height="39" colspan="6" align="center" bgcolor="#CCFF99"><strong>MY IPD</strong></td>
  </tr>
  <tr>
  <form>
  <td width="173" height="252" align="center" div>  
    <label>
      <br />
      <input type="submit"  value="Pulau Pinang" />
      <br />
      <br />
    </label>
    <table width="173" border="0">
      <tr>
        <td><strong>
          <input type="checkbox" name="Timur Laut" id="Timur Laut" />
          <label for="Timur Laut">Timur Laut</label>
        </strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Barat Daya" id="Barat Daya" />
        Barat Daya</strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Sbrg Perai Utara" id="Sbrg Perai Utara" />
        Sbrg Perai Utara
          </strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Sbrg Perai Tgh" id="Sbrg Perai Tgh" />
          Sbrg Perai Tgh</strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Sbrg Perai Selatan" id="Sbrg Perai Selatan" />
          Sbrg Perai Selatan</strong></td>
      </tr>
    </table>
    <label>      <br />
      <br />
    </label></td>
  <td width="161" align="center" div>  
    <label>
      <br />
      <input type="submit"  value="Barat Daya" /> 
      <br />
      <br />
      </label>
    <table width="145" border="0">
      <tr>
        <td width="167"><strong>
          <input type="checkbox" name="Balik Pulau" id="Balik Pulau" />
          Balik Pulau
            </strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Bayan Lepas" id="Bayan Lepas" />          
          <label for="IPD Timur Laut7">Bayan Lepas</label>
        </strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Teluk Bahang" id="Teluk Bahang" />          
          <label for="IPD Timur Laut8">Teluk Bahang</label>
        </strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Teluk Kumbar" id="Teluk Kumbar" />          
          <label for="IPD Timur Laut9">Teluk Kumbar</label>
        </strong></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
    <label><br />
  <br />
    </label></td>
  <td width="165" align="center" div>  
    <label><input type="submit"  value="Timur Laut" />
      <br />
      <br />
</label>
    <table width="161" border="0">
      <tr>
        <td width="151"><strong>
          <input type="checkbox" name="Ayer Hitam" id="Ayer Hitam" />
          Ayer Hitam</strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Bandar Baru" id="Bandar Baru" />          
          <label for="IPD Timur Laut12">Bandar Baru</label>
        </strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Bukit Bendera" id="Bukit Bendera" />
          Bukit Bendera
            </strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Central" id="Central" />
        Central
          </strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Dato Kramat" id="Dato Kramat" /> 
          Dato Kramat
            </strong></td>
      </tr>
    </table>
    <label><br />
    </label></td>
  <td width="166" align="center" div>  
    <label><input type="submit"  value="Seberang Perai Selatan" /> 
      <br />
      <br />
</label>
    <table width="166" border="0">
      <tr>
        <td><strong>
          <input type="checkbox" name="Bukit Tambun" id="Bukit Tambun" />
Bukit Tambun</strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Nibung Tebal" id="Nibung Tebal" />
          Nibung Tebal</strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Simpang Ampat" id="Simpang Ampat" />
          Simpang Ampat</strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Sg. Bakap" id="Sg. Bakap" />
          Sg. Bakap
          </strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Timur Laut19" id="Timur Laut19" />          
          <label for="IPD Timur Laut20">IPD Timur Laut</label>
        </strong></td>
      </tr>
    </table>
    <label><br />
    </label></td>
  <td width="166" align="center" div>  
    <label><input type="submit"  value="Seberang Perai Tengah" /> 
      <br />
      <br />
</label>
    <table width="166" border="0">
      <tr>
        <td><strong>
          <input type="checkbox" name="Bukit Mertajam" id="Bukit Mertajam" />
        Bukit Mertajam
          </strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Bukit Tengah" id="Bukit Tengah" />
        Bukit Tengah</strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Kubang Kemang" id="Kubang Kemang" />          
          <label for="IPD Timur Laut23">Kubang Kemang</label>
        </strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Machong Bubok" id="Machong Bubok" />          
          <label for="IPD Timur Laut24">Machong Bubok</label>
        </strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Perai" id="Perai" />          
          <label for="IPD Timur Laut25">Perai</label>
        </strong></td>
      </tr>
    </table>
    <label><br />
    </label></td>
  <td width="166" align="center" div>  
    <label><input type="submit"  value="Seberang Perai Utara" /> 
      <br />
      <br />
</label>
    <table width="130" border="0">
      <tr>
        <td width="124"><strong>
          <input type="checkbox" name="Butterworth" id="Butterworth" />
        Butterworth</strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Kepala Batas" id="Kepala Batas" />
        Kepala Batas</strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Sg. Dua" id="Sg. Dua" />          
          <label for="IPD Timur Laut28">Sg. Dua</label>
        </strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Tasek Gelugor" id="Tasek Gelugor" />          
          <label for="IPD Timur Laut29">Tasek Gelugor</label>
        </strong></td>
      </tr>
      <tr>
        <td><strong>
          <input type="checkbox" name="Air Tawar" id="Air Tawar" />
        Air Tawar</strong></td>
      </tr>
    </table>
    <label><br />
    </label></td>
  </form></tr> <br />
  <tr>
    <td height="51" colspan="6" align="center" div> <p>&nbsp;</p>
      <p> 
  <label>
         <input type="submit"  value="Submit" />
  </label>
  <label>
    <input type="Reset" name="Reset" id="Reset" value="Reset" />
  </label>
      </p> 
    </center>&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>    

thanks in advance

Re: facing problem with check all and uncheck all box

Posted: Mon Jul 25, 2011 1:39 pm
by Benjamin
:arrow: Moved to Javascript

Re: facing problem with check all and uncheck all box

Posted: Wed Jul 27, 2011 1:12 pm
by phazorRise
there are errors
post the code you've tried.
i'm planning to add function in the main button to be check all or uncheck all
for this main button, you are using submit button. Form will submit when user clicks on it [ unless you've some mechanism to stop this default behavior of submit button].Instead you can simply use <button>Pulau Pinang</button>.