5 Replies - 787 Views - Last Post: 20 April 2013 - 11:28 AM

#1 HouseFinch  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 6
  • Joined: 14-April 13

how can I use tabindex to get location of a checked box in a group?

Posted 15 April 2013 - 12:53 AM

Hi, how can I use tabindex to get the location of a checked box in a group?

Iíve tried creating for loops but couldnít get it to work. After a day of research I thought by adding var indexValue = ($(this).attr('tabindex')); I could get the position of the checked box then use that value to select the correct item.. Cah you please tell me what Iím doing wrong here?

</fieldset>
                                
         <script type="text/javascript">

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

             $(document).ready(function () {
                 var nl = 4;
                 var nos = $('#listTable #searchString').length;
                 $.each($checkboxes, function () {
                     if ($(this).is(':checked')) {
                         var indexValue = ($(this).attr('tabindex'));

                         $('#listTable .daylists').eq(indexValue).css('border', '2px dashed blue').val($('option:first', this).val());
                         $('#listTable .teacherlists').eq(indexValue).css('border', '2px dashed blue').val($('option:first', this).val());

                     }


                 });

             });


</script>




Thanks for any help?

Is This A Good Question/Topic? 0
  • +

Replies To: how can I use tabindex to get location of a checked box in a group?

#2 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 828
  • Joined: 25-October 08

Re: how can I use tabindex to get location of a checked box in a group?

Posted 17 April 2013 - 06:57 AM

Question:

Why do you need the tabIndex?
The normal purpose of the checkbox is to determine if the user has or has not selected an option presented. I don't see any need for the position of the checkbox.

Please clarify what it is that you are trying to do and the need for the tabIndex.
:online2long:
Was This Post Helpful? 0
  • +
  • -

#3 HouseFinch  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 6
  • Joined: 14-April 13

Re: how can I use tabindex to get location of a checked box in a group?

Posted 17 April 2013 - 11:00 PM

I have about 30 different courses that a student can enroll for. A student can be enrolled by sim plying selecting the corresponding checkbox that is inside of a table. Besides the checkbox in each cell, I have dropdown lists of the day that the student will attend class and another dropdown list of the teacher assigned to the enrolled student. That's three controls per cell. Let's say checkbox #3 is selected. I also want to manipulate the other controls that would be in the same position in their respective group. The position of the checked box is the same position of the other controls. I'm not sure that tabindex will do the trick but it seems a logical choice.
Was This Post Helpful? 0
  • +
  • -

#4 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 828
  • Joined: 25-October 08

Re: how can I use tabindex to get location of a checked box in a group?

Posted 18 April 2013 - 12:06 PM

It's best to not use tables whenever possible as they are much slower to render.
The following code could be compressed a bit, but you have not given much information other than for a template
of how your request might be accomplished.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Untitled </title>

<script type="text/javascript">

</script>

<style type="text/css">
 li { list-style-type:none; float:left; }
 .cInfo { display:none; }
 .cBox { float:left; margin:4px 8px 0px 0px; }
</style>

</head>
<body>
<div id="courseInfo">
 <ul>
  <li>
   <input class="cBox" type="checkbox" id="courseID1" value="Course 1" onclick="toggle(this.checked,'cInfo1')">
   <div style="width:150px; float:left;">
    Course 1 Description <br> Introduction to HTML
   </div>
  <li>
   <span class="cInfo" id="cInfo1">
    <select>
     <option value="Day of Class">Days</option>
     <option value="1">Monday</option>
     <option value="2">Tuesday</option>
     <option value="3">Wednesday</option>
     <option value="4">Thursday</option>
     <option value="5">Friday</option>
     <option value="6">Saturdayday</option>
     <option value="0">Sunday</option>
    </select>
    <select>
     <option value="Instructor">Instructors</option>
     <option value="1">Mr. Able</option>
     <option value="2">Dr. Best</option>
     <option value="3">Mrs. Chosen</option>
    </select>
   </span>
  </li><br style="clear:both">

  <li>
   <input class="cBox" type="checkbox" id="courseID2" value="Course 2" onclick="toggle(this.checked,'cInfo2')">
   <div style="width:150px; float:left;">
    Course 2 Description <br> Introduction to CSS
   </div>
  <li>
   <span class="cInfo" id="cInfo2">
    <select>
     <option value="Day of Class">Days</option>
     <option value="1">Monday</option>
     <option value="2">Tuesday</option>
     <option value="3">Wednesday</option>
     <option value="4">Thursday</option>
     <option value="5">Friday</option>
     <option value="6">Saturdayday</option>
     <option value="0">Sunday</option>
    </select>
    <select>
     <option value="Instructor">Instructors</option>
     <option value="1">Mr. Able</option>
     <option value="2">Dr. Best</option>
     <option value="3">Mrs. Chosen</option>
    </select>
   </span>
  </li><br style="clear:both">

  <li>
   <input class="cBox" type="checkbox" id="courseID3" value="Course 3" onclick="toggle(this.checked,'cInfo3')">
   <div style="width:150px; float:left;">
    Course 3 Description <br>Introduction to Javascript
   </div>
  <li>
   <span class="cInfo" id="cInfo3">
    <select>
     <option value="Day of Class">Days</option>
     <option value="1">Monday</option>
     <option value="2">Tuesday</option>
     <option value="3">Wednesday</option>
     <option value="4">Thursday</option>
     <option value="5">Friday</option>
     <option value="6">Saturdayday</option>
     <option value="0">Sunday</option>
    </select>
    <select>
     <option value="Instructor">Instructors</option>
     <option value="1">Mr. Able</option>
     <option value="2">Dr. Best</option>
     <option value="3">Mrs. Chosen</option>
    </select>
   </span>
  </li><br style="clear:both">

 </ul>

</div>

<script type="text/javascript">
function toggle(ckStatus,IDS) {
  var sel = document.getElementById(IDS);
  if (ckStatus) { sel.style.display = 'block'; }
           else { sel.style.display = 'none'; }
}
</script>

</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#5 HouseFinch  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 6
  • Joined: 14-April 13

Re: how can I use tabindex to get location of a checked box in a group?

Posted 20 April 2013 - 08:50 AM

That works too. Thank so much for your help.

This post has been edited by Dormilich: 23 April 2013 - 02:51 AM

Was This Post Helpful? 0
  • +
  • -

#6 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 828
  • Joined: 25-October 08

Re: how can I use tabindex to get location of a checked box in a group?

Posted 20 April 2013 - 11:28 AM

You're most welcome.
Happy to help.
Good luck.
:)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1