Jquery 选中的单选框查找显示以前选中的项目

Question

我有这个 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 fiddle 中测试这个函数时它工作...但是当我在工作环境中使用其他 js 代码测试时它不起作用...但是这个函数单独不涉及任何其他变量名或函数名。

我的问题是，当我点击 rcal2 按钮时，它首先提醒 rcal1，当我第二次点击时，它提醒 rcal2.And 与 rcal3 按钮相同。第一次它提醒之前检查的值。

有人能告诉我检查哪个框被选中的替代方法吗...我不想要 $(this) 方法..因为其他函数也将使用这种循环方式。

Answer 1

当您点击 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>

Answer 2

这是另一种方法，而不是 .click() 事件使用 .change() 。 .change() 事件上的单选按钮是获取所选值的好方法。

JS:

working Demo

$(".calsort input").on('change', function () {
    var self = jQuery(this);
    var aResult = self.is(":checked");
    if (aResult) {
        alert(self.attr('id'));
    }
});

Jquery 选中的单选框查找显示以前选中的项目

Jquery Radio box checked find is showing previously checked Item

html

javascript

jquery