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