javascript - jQuery单选框选中的查找显示先前选中的项目

我有这个HTML

<div   class="calsort btn-group" data-toggle="buttons">
    <label class="btn btn-primary ">
        <input type="radio" name="options" id="rcal1" autocomplete="off" checked="checked">rcal1</label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="rcal2" autocomplete="off">rcal2</label>
    <label class="btn btn-primary">
        <input type="radio" name="options"  id="rcal3" autocomplete="off">rcal3</label>
</div>

还有我的javascript

$( ".calsort" ).click(function() {

$(".calsort :checked").each(function() {
rcal = this.id;
    alert(rcal);
});
});

因此，当我在js提琴中测试此功能时，它可以工作...但是当我在工作环境中与其他js代码一起测试时，则无法正常工作...但是，此功能单独不涉及任何其他变量名或函数名。

我的问题是，当我单击rcal2按钮时，它将首先警告rcal1，而当我单击第二次时，它将警告rcal2。同样，对于rcal3按钮。

有人可以告诉另一种检查复选框的方法吗...我不想要$（this）方法..因为其他功能也将使用这种循环方法。

最佳答案

当您单击lable而不是radio button时，就会发生这种情况。原因是单击标签时，单击事件发生时，先前选中的按钮未清除。即使在jsfiddle中，它也会发生（尝试单击标签here）。

试试这个，

$( ".calsort input" ).click(function() {
    var rcal = this.id;
    alert(rcal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div   class="calsort btn-group" data-toggle="buttons">
    <label class="btn btn-primary ">
        <input type="radio" name="options" id="rcal1" autocomplete="off" checked="checked">rcal1</label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="rcal2" autocomplete="off">rcal2</label>
    <label class="btn btn-primary">
        <input type="radio" name="options"  id="rcal3" autocomplete="off">rcal3</label>
</div>