View Full Version : checkboxes - index value - rookie question

06-24-2004, 01:01 AM
I have a question that I have the feeling will be rather simple to answer. Searched and searched with no luck.

I have a Javascript that dynamically creates a dozen checkboxes. Each checkbox has an 'onClick' event. I need to know the index value of the checkbox that was clicked, so that I can take appropriate action. What tells me the value of the index number of a particular checkbox?

06-24-2004, 05:10 AM
You can set the "value" attribute of each checkbox to be the basis of the next action.

<input type="checkbox" name="chk1" value="1" onclick="doSomething(this)" />
<input type="checkbox" name="chk2" value="2" onclick="doSomething(this)" />
<input type="checkbox" name="chk3" value="3" onclick="doSomething(this)" />

function doSomething(chk){

or since you dynamically create the checkboxes, you can pass directly the index to the function.

<input type="checkbox" name="chk1" value="1" onclick="doSomething(1)" />
<input type="checkbox" name="chk2" value="2" onclick="doSomething(2)" />
<input type="checkbox" name="chk3" value="3" onclick="doSomething(3)" />

It really depends on how you generate the checkboxes.

06-24-2004, 07:53 AM
Thanks for trying to help. But the question is different.

What I want to do is to find out which of the checkboxes has been selected when the 'onClick' happens. Suppose you have ten checkboxes on a screen, and you check three. How can I tell which one was the last that you checked? looping through them doesn't help... I need a number that corresponds to the checkbox that was last checked, so I can store it in a variable. I should somehow be able to read the index value of a checkbox when it is clicked.

And I can't figure out how!

06-24-2004, 10:12 AM
What do you exactly mean by "last checked"? The last checked as physically done by the user or the last checked in the list of checkbox? Posting your codes will also enable us to have something to work on.

06-24-2004, 05:45 PM
The only way I can come up with is when the onclick is fired, loop through the checkbox array and compare the value of each checkbox to the value of the one that was clicked. The problem with this method is that if two checkboxes have the same value you may not target the right one.
<form name="aform" onsubmit="return false">

You clicked: <input type="text" name="op1"> in set <input type="text" name="op3"><br>
Value: <input type="text" name="op2"><br>
<fieldset><legend>checkbox set 1</legend>
12 checkboxes, assigned random values of 0-9. there will be at least two duplicates (index,value)<br>
in the case of duplicates, the highest index will be shown.<br>
<script language="JavaScript" type="text/javascript">
function dosomething(elem){
var target_index = null;
document.aform.op3.value = elem.name;
for(var i = 0; i < document.aform.elements[elem.name].length; i++){
if(document.aform.elements[elem.name][i].value == elem.value)
target_index = i;
if(target_index != null)
document.aform.op1.value = target_index;
document.aform.op1.value = "not found";
document.aform.op2.value = elem.value;

/* write checkboxes with pseudorandom values */
for(var i = 0; i < 12; i++){
rndval = Math.floor(Math.random() * 10);
document.writeln("<input type='checkbox' name='cb_set1' value='" + rndval + "' onclick='dosomething(this)'>(" + i + "," + rndval + ") ");
<fieldset><legend>checkbox set 2</legend>
12 checkboxes, assigned unique values. duplicates won't occur so the index will always be right<br>
<script language="JavaScript" type="text/javascript">
/* write checkboxes with unique values */
for(var i = 0; i < 12; i++){
document.writeln("<input type='checkbox' name='cb_set2' value='" + (i + 1) + "' onclick='dosomething(this)'>(" + i + "," + (i + 1) + ") ");

Sorry the code's so sloppy. You can see it in action here (http://kansel.homeip.net:81/askme/checkbox_group_index.html)

06-24-2004, 06:35 PM
I played with an array for that. :p

<script type="text/javascript">
var lci = [];
function setLastCheckedIndex(container, evt)
var clickedBox;
evt.target ? clickedBox = evt.target : clickedBox = evt.srcElement;
if(clickedBox == container)
return false;
var ln,
boxes = container.getElementsByTagName("INPUT"),
i = 0;
ln = boxes.length;
while(i < ln && boxes[i] != clickedBox)
ln = lci.length;
while(i < ln && boxes[lci[i]] != clickedBox)
if(i < ln)
lci.splice(i, 1);
<form style="text-align:center">
<div onclick="setLastCheckedIndex(this, event)">
<input type="checkbox"><label>0</label><br>
<input type="checkbox"><label>1</label><br>
<input type="checkbox"><label>2</label><br>
<input type="checkbox"><label>3</label><br>
<input type="checkbox"><label>4</label>
<input type="button" value="last checked" onclick="alert(lci[0])">

06-25-2004, 04:45 AM
:rolleyes: I was hoping to get around it, but looping seems to be the only way.
I think that it's kind of interesting that if you have a set of checkboxes that are an array, you can't diectly get the index value of the clicked element.

Suppose that you have a set of dynamically created checkboxes, and when one of them is checked you run a function, and depending on the result, popup an alert and uncheck the box that was just checked. It would be a heck of a lot easier if you directly knew which box was checked, instead of having to go and somehow find it. Maybe not a great example... but you get the idea.

Thanks for all the help!

06-25-2004, 05:04 AM
If you use the this keyword in the onclick handler, you already have the reference to that checkbox.

function who(objChk){
alert("value: "+objChk.value);
alert("checked? "+objChk.checked);
<input type="checkbox" value="0" onclick="who(this)" />
<input type="checkbox" value="1" onclick="who(this)" />
<input type="checkbox" value="2" onclick="who(this)" />