0

I've seen many examples on setting tabindex for checkboxes but I haven't been able to find examples of getting the currently selected checkbox’s tabindex or its position in a group. I’ve been trying to make the below code work but I get a value of 0 for each checked box. Can you please point me to an example or help me with this one? Thanks. 

  $.each($checkboxes, function () {

                 if ($(this).is(':checked')) {
                     var selectedIndex = $(this).attr('tabindex');
                      //do something with selectedIndex

EDIT

so jesh.tesh I am trying to use your code in this line var theCheckboxPosition = ($(this).prop("tabindex")); but it ignores the eq(theCheckboxPosition). Here's what I should've posted to begin with.

         var $checkboxes = $('input[type="checkbox"]');

         $(document).ready(function () {

             var nos = $('#listTable #searchString').length;

             // alert(nos);
             $.each($checkboxes, function (idx, data) {
                 if ($(this).is(':checked')) {

                     //  alert('checked');
                     var theCheckboxPosition = ($(this).prop("tabindex"));
                     $('#listTable .teacherlists').eq(theCheckboxPosition).css('border', '2px dashed blue');
                     $('#listTable .daylists').eq(theCheckboxPosition).css('border', '2px dashed blue');

                 }


             });

         });

        </script>
CloudyKooper
  • 727
  • 3
  • 19
  • 47
  • Are you looking for `tabindex` or `position in a group`? These are different beasts: quite often, `tabindex` attribute is omitted. – raina77ow Apr 14 '13 at 21:15
  • I would like to know the position in a group. I guess that's why I couldn't find many examples...sorry...still a bit of a rookie. – CloudyKooper Apr 14 '13 at 22:01

1 Answers1

2

I think you will want to use prop. I have a working jsFiddle.

Here is what is in the fiddle:

HTML

<ul>
    <li><input type="checkbox" tabindex="1" /></li>
    <li><input type="checkbox" tabindex="2" /></li>
    <li><input type="checkbox" tabindex="3" /></li>
</ul>
<p>
    <button>Submit</button>
</p>

JS

$(function () {
    $("button").on("click", function () {
        $.each($("input[type=checkbox]"), function (idx, data) {
            if ($(this).is(":checked")) {
               console.log($(this).prop("tabindex")); 
            }
        });
    });
});

EDIT

After reading your question again, I see that you asked 2 different things. You asked for the tabindex, which I provided a solution for, and you asked for the position in a group, which the other answer provided for you. These are not the same thing.

My guess is you'll want the previous answer since you probably don't use tabindex attributes (most people omit these).

Tim Hobbs
  • 2,017
  • 17
  • 24
  • Tried your example at jsFiddle but nothing there's no output to the console...no index or checkbox position. – CloudyKooper Apr 14 '13 at 22:14
  • Unrelated, but shouldn't this use `attr` not `prop`? – Dave Apr 14 '13 at 22:15
  • @Dave Ya, tabindex is an attribute, should use .attr() – A. Wolff Apr 14 '13 at 22:17
  • @Dave/roasted - Actually, `prop` is typically the better way to go: http://stackoverflow.com/a/5876747/189937 - though they admittedly do much of the same thing. It is quite possible that there has been a flop back to `attr` preferred over `prop` now that I am unaware of. – Tim Hobbs Apr 15 '13 at 01:25
  • @CloudyKooper - I use Chrome, so it is possible that this doesn't behave the same in IE/FF/O. Maybe that is the issue? – Tim Hobbs Apr 15 '13 at 01:28
  • Looks like ```prop()``` returns an int, ```attr()``` returns a string – atfergus Aug 12 '15 at 15:34