Clever Geek Handbook

Check the box

I am trying to show the position of a checkbox when the user checks the checkbox every time using JQuery. For example, when the user checks for Monday, it displays position 0, and when the user checks for Sunday, it displays position 6. I couldn't find a way to do this. I tried using .index () but it keeps showing me 0. Any idea how to do this?

Html code

<div class="col-sm-9 checkbox_days">
    <label class="checkbox">
        <input type="checkbox" class="day" name="day[]" value="Monday"> Monday
    </label>
    <label class="checkbox">    
        <input type="checkbox" class="day" name="day[]" value="Tuesday"> Tuesday
    </label>
    <label class="checkbox">
        <input type="checkbox" class="day" name="day[]" value="Wednesday"> Wednesday
    </label>
    <label class="checkbox">
        <input type="checkbox" class="day" name="day[]" value="Thursday"> Thursday
    </label>
    <label class="checkbox">                        
        <input type="checkbox" class="day" name="day[]" value="Friday"> Friday
    </label>
    <label class="checkbox">                        
        <input type="checkbox" class="day" name="day[]" value="Saturday"> Saturday
    </label>
    <label class="checkbox">                        
        <input type="checkbox" class="day" name="day[]" value="Sunday"> Sunday
    </label>
</div>

JQuery

$('.day').on('change', function() {
    $(this).each(function() {
        if (this.checked) {
            alert($(this).index());
        } else {
            alert("unchecked");
        }
    });
});
+3


source to share


7 replies


You need to use .index(element)

to find the index of the items in the list.

$('.day').index(this)

If no argument is passed to the .index () method, the return value is an integer indicating the position of the first element in the jQuery object relative to its siblings.



$(function() {
  $('.day').on('change', function() {

    if (this.checked) {
      alert($('.day').index(this));
    } else {
      alert("unchecked");
    }

  });
});
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-9 checkbox_days">
  <label class="checkbox">
    <input type="checkbox" class="day" name="day[]" value="Monday">Monday
  </label>
  <label class="checkbox">
    <input type="checkbox" class="day" name="day[]" value="Tuesday">Tuesday
  </label>
  <label class="checkbox">
    <input type="checkbox" class="day" name="day[]" value="Wednesday">Wednesday
  </label>
  <label class="checkbox">
    <input type="checkbox" class="day" name="day[]" value="Thursday">Thursday
  </label>
  <label class="checkbox">
    <input type="checkbox" class="day" name="day[]" value="Friday">Friday
  </label>
  <label class="checkbox">
    <input type="checkbox" class="day" name="day[]" value="Saturday">Saturday
  </label>
  <label class="checkbox">
    <input type="checkbox" class="day" name="day[]" value="Sunday">Sunday
  </label>
</div>
Run codeHide result


+5


source


You need to find out the parent index. Use closest()

to get a specific parent.

$('.day').on('change', function() {
    alert($(this).closest(".ui-checkbox").index() + 1);
});


Fiddle

+2


source


Use a click capture event for simplicity:

$('input[type="checkbox"]').click(function () {
    alert($('input[type="checkbox"]').index(this));
});
0


source


Just do it

 if (this.checked) {
     alert($(this).parent('label').index());
 }

instead

  $(this).each(function(){
        if(this.checked){
            alert($(this).index());
        } 
    });

FIDDLE :

If you want your checkboxes to be mutually checked, here is the FIDDLE :

0


source 


var map = {
        'Monday': 0,
        'Tuesday': 1,
        'Wednesday': 2,
        'Thursday': 3,
        'Friday': 4,
        'Saturday': 5,
        'Sunday': 6
}
$('.day').on('change', function () {

    if (this.checked) {
        alert(map[$(this).val()]);
    } else {
        alert("unchecked");
    }

});
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-9 checkbox_days">
    <label class="checkbox">
        <input type="checkbox" class="day" name="day[]" value="Monday">Monday</label>
    <label class="checkbox">
        <input type="checkbox" class="day" name="day[]" value="Tuesday">Tuesday</label>
    <label class="checkbox">
        <input type="checkbox" class="day" name="day[]" value="Wednesday">Wednesday</label>
    <label class="checkbox">
        <input type="checkbox" class="day" name="day[]" value="Thursday">Thursday</label>
    <label class="checkbox">
        <input type="checkbox" class="day" name="day[]" value="Friday">Friday</label>
    <label class="checkbox">
        <input type="checkbox" class="day" name="day[]" value="Saturday">Saturday</label>
    <label class="checkbox">
        <input type="checkbox" class="day" name="day[]" value="Sunday">Sunday</label>
</div>
Run codeHide result


you can use persistence of state in some variable and use it

0


source


$ ('input: checkbox'). click (function () {var selectedIndex = $ ('input: checkbox'). index ($ (this));

alerts (SelectedIndex); });

0


source


You put the checkbox in a separate div for each, so it always returns 0 as the index. Try to get the index of the parent node as shown below

 alert($(this).parent('.checkbox').index() + 1);
 or
 alert($(this).parent().index() + 1);
0


source






More articles:


All Articles