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

【问题标题】：Get and display checked checkbox index获取并显示选中的复选框索引
【发布时间】：2015-06-17 07:34:42
【问题描述】：

当用户每次使用 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");
        }
    });
});

【问题讨论】：

删除你不需要的$(this).each(function(){
如果您删除标签，它应该可以工作。像这样，复选框没有兄弟姐妹。至少使用您的选择器。

标签： javascript jquery html checkbox

【解决方案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>

【讨论】：

【解决方案2】：

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

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

Fiddle

【讨论】：

【解决方案3】：

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

警报(selectedIndex); });

【讨论】：

【解决方案4】：

就这样做

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

而不是

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

FIDDLE:

如果您希望您的复选框相互检查，那么这里是FIDDLE：

【讨论】：

【解决方案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>

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

【讨论】：

【解决方案6】：

您在每个单独的 div 中放置了一个复选框，因此它始终返回 0 作为索引。尝试获取父节点的索引，如下所示

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

【讨论】：

【解决方案7】：

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

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

【讨论】：