Javascript jQuery单选按钮更改

因此，我在这里和其他地方查看了如何在单击单选按钮时使用jQuery执行函数。我能够使示例代码独立工作，就像在CodePen中一样，但当集成到我的项目中时，它将无法工作

我用的不是单选按钮，而是引导按钮。表单的相关部分最终如下所示：

<div class="btn-group" data-toggle="buttons" role="group" id="floors-div">
    <label class="btn btn-default" name="floors-label">
        <input type="radio" name="floors" id="1" value="1" autocomplete="off">1</label>
    <label class="btn btn-default" name="floors-label">
        <input type="radio" name="floors" id="2" value="2" autocomplete="off">2</label>
    <label class="btn btn-default" name="floors-label">
        <input type="radio" name="floors" id="3" value="3" autocomplete="off">3</label>
    <label class="btn btn-default" name="floors-label">
        <input type="radio" name="floors" id="4" value="4" autocomplete="off">4</label>
</div>

但这个值是错误的。它返回以前选择的按钮的值，而不是当前按钮的值。如果我只是做一些像：

$("input[name='floors']").change(function() {
...snip...

单击按钮时不会发生任何事情

有什么建议吗

编辑：在你的帮助下，我已经缩小了问题的范围。事实证明，我所做的代码笔和产品之间的主要区别在于包含了Bootstrap的JS。显然，它们正在重写一些会干扰

.change

方法的内容。问题转载于CodePen

编辑2：如果重要的话，我的所有JS都在

$（document）.ready（函数（）{

）中。

change（）事件对我来说很好地处理了你的代码：

$（“输入[name='floors']”）。更改（函数（）{
var val=$（“输入[type='radio'][name='floors']：选中”）.val（）；
警报（val）；
})；

1.
2.
3.
4.

使用

。更改
方法而不是
。单击

$("input[name='floors']").change(function() {
    var buttonVal = $("input[type='radio'][name='floors']:checked").val();
    alert(buttonVal);
})

或

$("input[name='floors']").change(function() {
    var buttonVal = $(this).val();
    alert(buttonVal);
})

小提琴：
使用
change（）
事件。
此
指向当前元素

$("input[name='floors']").change(function() {
    var val = $(this).val();// this
    alert(val);
});

在文档加载此调用后，尝试绑定单击事件：

$("input[name='floors']").on("click",function(e)
{
        console.log($(this).val());
});

只需测试此项，然后单击各个按钮即可返回正确的值。
使用类似的方法进行尝试

或

嗨，你可以试试这个，希望对你有用


$（“#floors div input:radio[name='floors']”）。on（'change'，function（）{
log（$（this））；
})
在codepen上查看您的代码后，我整理出了您的问题，发现您的代码是正确的，事实上问题在于每当您单击按钮时，您实际上并没有单击单选按钮，而是单击了“标签”。每当我移除标签标签时，您的代码都能正常工作。下图


但我通过以下代码解决了您的问题：）您可以查看演示。
还编辑了您的代码笔->
$（文档）.ready（函数（）{
$（“label.floorNum”）。在（“单击”，函数（）
{ 
警报（$（this.find（'input'）.val（））；
});
})；

地区
北
南方
东边
西部
建筑
AAA
BBB
地板
1.
2.
3.
房间号


101
102
103
104
105
106
107
108
您的侦听器已连接到父级。单击（），可能是时间的问题，在我的脑海中的形式很糟糕-尝试连接到收音机本身，而不是jQuery
change
event对我来说很好：你加载了jQuery吗？change event工作得很好。@DanielBrose刚刚尝试了这个-不起作用。当我单击按钮时，什么都没有发生。@WisdmLabs是的-我加载了它。我还有其他jQuery w在页面上工作很好。两者都不起作用。奇怪的是，我做了一些类似的事情，它确实起作用了。我甚至包括了引导JS。这没有什么运气。澄清：什么都没有发生。不是我没有得到值…控制台上什么都没有显示。耶！你的工作非常好！你不知道这有多棒-非常感谢很
$("input[name='floors']").on("click",function(e)
{
        console.log($(this).val());
});

 $("#floors-div").on("change", "input[name='floors']", function () {
        //code snippets
 });

$(document).on("change", "input[name='floors']", function () {
        //code snippets
 });