Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    checkboxes - index value - rookie question

    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?

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,030
    Thanks
    0
    Thanked 247 Times in 244 Posts
    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){
    alert(chk.value);
    }

    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.

  • #3
    New to the CF scene
    Join Date
    May 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Clarification

    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!

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,030
    Thanks
    0
    Thanked 247 Times in 244 Posts
    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.

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    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.
    Code:
    <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>
    <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;
    	else
    		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 + ") ");
    }
    </script>
    </fieldset>
    <br>
    <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) + ") ");
    }
    </script>
    </fieldset>
    </form>
    Sorry the code's so sloppy. You can see it in action here

  • #6
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I played with an array for that.
    Code:
    <body>
    <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;
       if(clickedBox.checked)
        {
          ln = boxes.length;
          while(i < ln && boxes[i] != clickedBox)
            i++;
          lci.unshift(i);
        }
       else
        {
          ln = lci.length;
          while(i < ln && boxes[lci[i]] != clickedBox)
            i++;
          if(i < ln)
            lci.splice(i, 1);
        }
     }
    </script>
    <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>
      </div>
      <input type="button" value="last checked" onclick="alert(lci[0])">
    </form>
    </body>

  • #7
    New to the CF scene
    Join Date
    May 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Interesting solutions

    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!

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,030
    Thanks
    0
    Thanked 247 Times in 244 Posts
    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)" />


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •