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

我的问题是，当我点击rcal2按钮时，它首先发出rcal1警报，当我点击第二次时它会发出rcal2警报。对于rcal3按钮也是如此。第一次警告先前检查过的值。

有人可以告诉其他方法来检查选中哪个方框...我不想要$（this）方法。因为其他功能也会使用这种循环方式。

Answer 1

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

试试这个，

＆＃13;

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

＆＃13;

<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>

＆＃13;

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 Radio box checked find显示以前检查过的Item

2 个答案: