Link to home
Start Free TrialLog in
Avatar of GerryLavender
GerryLavender

asked on

Get element ID from a clicked checkbox into numeric variable

I have a form with 200 plus checkboxes.  When the checkbox is checked onClick passes (this) to a Javascript function.  I need to get the element array ID of the just checked checkbox into a numeric variable.  The following routine never finds a match.  The value returned in thisCheckID is blank when I send it to a text field.
function getcheckboxid(formobj)
      {
      var checkboxname=formobj.name;
                var checks = document.getElementsByTagName("INPUT");
                var len = checks.length;
                var thisCheck, thisCheckID;
                for (var i = 0; i < len; i++)
                   {
                             if (checks[i].name == checkboxname)
            {
                                thisCheckID = checks[i].id;
            }
                document.form1.text1.value=thisCheckID;
      }
Avatar of Zvonko
Zvonko
Flag of North Macedonia image

Check this:

function getcheckboxid(theBox){
  var theForm = theBox.form;
  theForm.text1.value = theBox.id;
}




Avatar of GerryLavender
GerryLavender

ASKER

I tried the routine.  Still get a blank result.  If I change theBox.id to theBox.name I get the name of the checkbox as you would expect.  I need to get the ID so I can access all the checboxes by ID# in the elements array.
when you mean ID are you referring to the ID attribute? Zvonko's suggestion should work not unless you don't have id on the checkbox.

<input type="checkbox" name="chk1" id="chkID1" onclick="alert(this.id);">
There is no manually assigned ID in the control.  The ID I am talking about is the DOM element[i] array ID.  I am testing on the 8th control in the form which is a checkbox named SD1A.  I can access the checkbox name by:
var checkboxname=document.theForm.element[8].name

I can also access the checkbox name by:
var checkboxname=document.theForm.SD1A.name

If I pass the checkbox object (this) to a function as myObj I can get the name by:
var checkboxname=myObj.name

What I want to do is find the element array ID of the checkbox which in this case is 8.  Then I can access all 230 of the checkbox controls in my application by the theForm.element[i]
Maybe there is no way query that from the Object itself.
Thanks,
Gerry
ok that's clearer.

try,

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Third Santor</title>
<script>
var numChecks = 1;
function getcheckboxid(formobj){
  var index = 0;
  formobj.setAttribute('tag', numChecks);
 
  var checkboxname=formobj.name;
  var checks = document.getElementsByTagName("INPUT");
  var len = checks.length;
  var thisCheck, thisCheckID;
  for (var i = 0; i < len; i++){
    if(checks[i].type == 'checkbox'){
      if (checks[i].getAttribute('tag') == numChecks){         
            thisCheckID = i;
        break;
      }
      }    
  }
  numChecks++;
  document.theForm.text1.value = thisCheckID;
}

window.onload = function(){
  var obj = document.theForm;
  for(var i=0; i<obj.length; i++){
    if(obj.elements[i].type == 'checkbox'){
        obj.elements[i].onclick = function(){
          getcheckboxid(this);
        }       
      }
  }
}
</script>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<form name="theForm" method="post" action="" onsubmit="return ">
<input type="checkbox" name="SD1A"><br>
<input type="checkbox" name="SD1A"><br>
<input type="checkbox" name="SD1A"><br>
<input type="text" name="text1">
</form>
</body>
</html>
Gerry, show some of the checkboxes that call the upper function. Copy their generated html source as seen in a browser page source.

 That did it.  It did not dawn on me to just use the loop counter i, to get the array index.  I can see now that I could also access the array index of a checkbox by name if each checkbox had a different name.  
  I need store other prompted data for each checkbox selected.  By using the index, I can store data associated with each of the 200+ checkboxes in a couple of arrays instead of in 400+ hidden fields.
Thank you,
Gerry
ASKER CERTIFIED SOLUTION
Avatar of third
third
Flag of Philippines image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
hey check this out...

<script>
function ChkChecked(txtbox,chk)
{
if(chk.checked)
{
txtbox.value = ConcatStr(txtbox.value,chk.value)
}
else
{
txtbox.value = ChkCheckboxes(txtbox.value,chk.value)
}
}

function ConcatStr(XVal,NewVal)
{
XVal += ',' + NewVal
if(XVal.substr(0,1) == ',')
{
XVal = XVal.substr(1,XVal.length)
}
return XVal;
}

function ChkCheckboxes(txtvals,ChkVal)
{
var tmpary = new Array();
var iLoop;
var Result;

tmpary = txtvals.split(",")
Result = '';

for(iLoop=0;iLoop {
if(tmpary[iLoop]!=ChkVal)
{
Result = ConcatStr(Result,tmpary[iLoop])
}
}
return Result;
alert(Result);
}

function SetAllCheckBoxes(FormName, FieldName)
{
if(!document.forms[FormName])
return;
var objCheckBoxes = document.forms[FormName].elements[FieldName];
if(!objCheckBoxes)
return;
var countCheckBoxes = objCheckBoxes.length;
//alert(countCheckBoxes);
if(!countCheckBoxes)
objCheckBoxes.checked = CheckValue;
else
// set the check value for all check boxes
var txtbox = document.getElementById("hdn");
if(document.forms[FormName].elements['all'].checked)
{
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = true;
}
else
{
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = false;
}
if(txtbox.value="")
{
for(var i = 0; i < countCheckBoxes; i++)
{
ChkChecked(txtbox,objCheckBoxes[i]);
}
}
else
{
txtbox.value="";
for(var i = 0; i < countCheckBoxes; i++)
{
ChkChecked(txtbox,objCheckBoxes[i]);
}
}
}


</script>
<FORM NAME="dd" METHOD="get">
<input type="text" name="hdn">
<INPUT TYPE="checkbox" name="aa" value="chk1" önclick=ChkChecked(dd.hdn,this)>
<INPUT TYPE="checkbox" name="aa" value="chk2" önclick=ChkChecked(dd.hdn,this)>
<INPUT TYPE="checkbox" name="aa" value="chk3" önclick=ChkChecked(dd.hdn,this)>
<INPUT TYPE="checkbox" name="aa" value="chk4" önclick=ChkChecked(dd.hdn,this)>
<INPUT TYPE="checkbox" name="all" value="chkall" önclick=SetAllCheckBoxes('dd','aa')>
</FORM>
</html>


*** advert removed, mplungjan, ee page editor ***
Hi,

You can assign classname to checkbox and get the id using
document.getElementsByClassName("checkbox")

Hope this will help you
Sathish




*** advert removed, mplungjan, ee page editor ***
@Satish: that would be in FF3, Safari and Opera only
http://www.quirksmode.org/blog/archives/2008/05/getelementsbycl.html
And please do not advertise in questions. - you can link to your site from your profile