Pages

▼

Thursday, December 29, 2011

Select / Unselect all checkbox by selecting single check box

<!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>
<script>
var fieldName='chkName';

function selectall(){
  var i=document.frm.elements.length;
  var e=document.frm.elements;
  var name=new Array();
  var value=new Array();
  var j=0;
  var chkval=0;
  for(var k=0;k<i;k++)
  {
    if(document.frm.elements[k].name==fieldName)
    {
      if(document.frm.elements[k].checked==true){
        value[j]=document.frm.elements[k].value;
        //alert(value[j]);
        chkval+=value[j]+',';
        //}
        j++;
      }
    }
  }
  checkSelect();
document.getElementById('txtchkvValue').value=chkval.substr(1);
}
function selectCheck(obj)
{
 var i=document.frm.elements.length;
  for(var k=0;k<i;k++)
  {
    if(document.frm.elements[k].name==fieldName)
    {
      document.frm.elements[k].checked=obj;
    }
  }
  selectall();
}

function selectallMe()
{
  if(document.frm.allCheck.checked==true)
  {
   selectCheck(true);
  }
  else
  {
    selectCheck(false);
  }
}
function checkSelect()
{
 var i=document.frm.elements.length;
 var berror=true;
  for(var k=0;k<i;k++)
  {
    if(document.frm.elements[k].name==fieldName)
    {
      if(document.frm.elements[k].checked==false)
      {
        berror=false;
        break;
      }
    }
  }
  if(berror==false)
  {
    document.frm.allCheck.checked=false;
  }
  else
  {
    document.frm.allCheck.checked=true;
  }
}
</script>
</head>

<body>
<form name="frm">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
                                          <tbody><tr>
                                            <td width="6%"> <input name="chkName" id="checkbox1" value="1" onClick="selectall()" type="checkbox"></td>
                                            <td class="txt036" width="19%">Interior wall</td>
                                            <td width="6%"><input name="chkName" id="checkbox2" value="3" checked="checked" onClick="selectall()" type="checkbox"></td>
                                          
                                            <td class="txt036" width="21%">Exterior wall</td>
                                            <td class="txt008" width="6%"><input name="chkName" id="checkbox4" value="4" checked="checked" onClick="selectall()" type="checkbox"></td>
                                           
                                            <td class="txt036" width="11%">Wood</td>
                                            <td class="txt008" width="6%"><input name="chkName" id="checkbox3" value="2" onClick="selectall()" checked="checked" type="checkbox"></td>
                                             <td class="txt036" width="11%">Metal</td>
                                            <td class="txt008" width="6%"><input name="allCheck" id="allCheck" value="5" onClick="selectallMe()" type="checkbox"></td>
                                            <td class="txt036" width="8%">All</td>
                                          </tr>
                                      </tbody></table>
                                      </form>
</body>
</html>
at

No comments:

Post a Comment

Thank you for your Comment....