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

时间:2015-06-17 07:34:42

标签: javascript jquery html checkbox

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

7 个答案:

答案 0 :(得分:5)

您需要使用.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>

答案 1 :(得分:2)

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

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

Fiddle

答案 2 :(得分:0)

为简单起见,请使用点击捕获事件:

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

答案 3 :(得分:0)

就这样做

getAnotherBeanList

而不是

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

FIDDLE

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

答案 4 :(得分:0)

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>

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

答案 5 :(得分:0)

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

警报(的selectedIndex); });

答案 6 :(得分:0)

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

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