Question

当用户每次使用Jquery检查复选框时，我都试图显示复选框位置。例如，当用户检查星期一时，它将显示位置0，当用户检查星期日时，它将显示位置6.我找不到办法。我曾尝试使用.index（），但它一直向我显示0.有关如何操作的想法吗？

HTML代码

<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");
        }
    });
});

Answer 1

您需要使用.index(element)在列表中查找元素索引。

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

如果没有参数传递给.index（）方法，则返回值是一个整数，表示jQuery对象中第一个元素相对于其兄弟元素的位置。

$(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>

Answer 2

您需要找出父母的索引。使用closest()以获取特定的父级。

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

Fiddle

Answer 3

为简单起见，请使用点击捕获事件：

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

Answer 4

就这样做

getAnotherBeanList

而不是

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

FIDDLE：

如果您希望相互选中复选框，则此处为FIDDLE：

Answer 5

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>

你可以在某个变量中使用保存状态并使用它

Answer 6

$（'input：checkbox'）。click（function（）{ var selectedIndex = $（'input：checkbox'）。index（$（this））;

警报（的selectedIndex）; }）;

Answer 7

每个单独的div中都有一个复选框，因此它总是返回0作为索引。尝试获取父节点的索引，如下所示

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

获取并显示选中的复选框索引

7 个答案: