jQuery 单选按钮更改

Question

因此，我在此处和其他地方查看了如何在单击单选按钮时使用 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']").parent().click(function() {
...snip...
var buttonVal = $("input[type='radio'][name='floors']:checked").val();

但是这个值是错误的。它返回先前选择的按钮而不是当前按钮的值。如果我只是做这样的事情：

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

单击按钮时没有任何反应。

有什么建议？

编辑：我已经在您的帮助下缩小了导致问题的范围。事实证明，我所做的 CodePen 和生产之间的主要区别在于包含了 Bootstrap 的 JS。显然，他们正在覆盖与该.change方法相混淆的东西。问题CodePen转载这里。

编辑 2：如果重要的话，我所有的 JS$(document).ready(function(){也在里面。

Answer 1

在 codepen 上查看您的代码后，我解决了您的问题并发现您的代码是正确的，实际上问题是每当您单击按钮时，您实际上并没有单击单选按钮，而是单击了“标签”。每当我删除标签时，您的代码就可以完美运行。这是图像。

。

但我通过这段代码解决了你的问题:)你可以查看演示。还编辑了您的 codepen -> http://codepen.io/anon/pen/mJozaQ

$(document).ready(function(){
 
  $("label.floorNum").on("click",function()
  { 

          alert($(this).find('input').val());
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
    <div class="form-inline">
        <div class="form-group col-sm-3">
            <label for="housingArea">Area</label>
            <select id="housingArea" class="form-control">
                <option value="" style="display:none" selected></option>
                <option value="north">North</option>
                <option value="south">South</option>
                <option value="east">East</option>
                <option value="west">West</option>
            </select>
        </div>
        <div class="form-group col-sm-4">
            <label for="building">Building</label>
            <select id="building" class="form-control">
                <option value="" style="display:none" selected></option>
                <option value="AAA">AAA</option>
                <option value="BBB">BBB</option>
            </select>
        </div>
        <div class="form-group col-sm-5">
            <!--Fill with info from DB -->
            <label for="floorNum">Floor</label>
            <div class="btn-group" data-toggle="buttons" role="group">
                <label class="btn btn-default floorNum">
                    <input type="radio" name="floorNum" value="1" autocomplete="off">1
                </label>
                <label class="btn btn-default floorNum">
                    <input type="radio" name="floorNum" value="2" autocomplete="off">2
                </label>
                <label class="btn btn-default floorNum">
                    <input type="radio" name="floorNum" value="3" autocomplete="off">3
                </label>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="form">
        <div class="form-group">
            <label for="roomNum">Room Number</label>
            <br>
            <div class="btn-group" data-toggle="buttons" role="group">
                <label class="btn btn-default">
                    <input type="radio" name="roomNum" id="101" autocomplete="off">101
                </label>
                <label class="btn btn-danger">
                    <input type="radio" name="roomNum" id="102" autocomplete="off">102
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="roomNum" id="103" autocomplete="off">103
                </label>
                <label class="btn btn-success">
                    <input type="radio" name="roomNum" id="104" autocomplete="off">104
                </label>
                <label class="btn btn-warning">
                    <input type="radio" name="roomNum" id="105" autocomplete="off">105
                </label>
                <label class="btn btn-info">
                    <input type="radio" name="roomNum" id="106" autocomplete="off">106
                </label>
                <label class="btn btn-primary">
                    <input type="radio" name="roomNum" id="107" autocomplete="off">107
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="roomNum" id="108" autocomplete="off">108
                </label>
            </div>
        </div>
    </div>
</div>