Check the box

Question

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

javascript jquery html checkbox

DanKCl June 17. 15 at 7:34

source to share

7 replies

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

Anoop joshi June 17. '15 at 7:37

source to share

Use a click capture event for simplicity:

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

0

oMiKeY June 17. 15 at 7:42

source to share

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

Tushar raj June 17. 15 at 7:42

source to share

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 code Hide result

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

0

ozil June 17. 15 at 7:42

source to share

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

alerts (SelectedIndex); });

0

Farhad manafi June 17. 15 at 7:42

source to share

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

Jegan June 17. 15 at 7:54

source to share

Satpal · Accepted Answer · 2015-06-17T07:37:03+0000

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 code Hide result

Check the box

More articles: