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

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

Answer 1

jQuery change()事件对我来说很适合您的代码：

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<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>

＆＃13;

问题可能是其他地方，但不是代码的这一部分。

顺便说一下，使用this.value代替这么大的选择器肯定会更好它更容易，它是DOM属性（vanilla JS），它更快更易读：

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

Answer 2

在codepen上查看您的代码后，我整理了您的问题＆amp;发现您的代码是正确的，实际上问题是当您点击按钮时，您实际上没有点击单选按钮而是点击了标签＆＃39;。每当我删除标签标签时，您的代码都能完美运行。这是图像。

。

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

＆＃13;

$(document).ready(function(){
 
  $("label.floorNum").on("click",function()
  { 

          alert($(this).find('input').val());
  });
  
});

＆＃13;

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

＆＃13;

Answer 3

使用.change方法代替.click

$("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); })

小提琴：http://jsfiddle.net/hxe9ue97/

Answer 4

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

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

刚刚测试过这个并单击各种按钮会返回正确的值。

Answer 5

使用event delegation尝试这样做。

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

或者

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

Answer 6

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

$("#floors-div input:radio[name='floors']").on('change',function(){
    console.log($(this));
});

获取价值，您需要在我的代码中使用 $（this）.val（）; 。

Answer 7

使用change()事件。 this指向当前元素

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

DEMO

jQuery单选按钮更改

7 个答案: