jQuery单选按钮更改

Question

我在这里和其他地方查看了如何在单击单选按钮时使用jQuery执行函数。我能够使示例代码在CodePen等隔离的环境中工作，但将其集成到我的项目中时无法正常工作。

我没有使用普通的单选按钮，而是使用了bootstrap按钮。表单的相关部分最终看起来像这样：

<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(){中。

- Ross

---

jQuery的“change”事件对我来说很有效：http://jsfiddle.net/tyu294vt/2/ - Yeldar Kurmangaliyev

你已经加载了jQuery吗？更改事件正常工作。 - Domain

@YeldarKurmangaliyev 是的，我在我的帖子中提到了这一点。.change()方法在独立使用时运行良好。我在CodePen上复制了我的代码这里。 - Ross

@Ross 如果你打开一个页面，打开控制台并写入 $("input[name='floors']")，会有任何项目吗？ - Yeldar Kurmangaliyev

它显示所有的单选按钮，就像它应该的那样。这是非常奇怪的事情。没有理由说明为什么这些不起作用。 - Ross

Answer 1

尝试使用事件委托，像这样：event delegation。

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

或者

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

- John R

---

都没有起作用。奇怪的是，我在这里做了类似的事情（http://codepen.io/RossIV/pen/OVqBwd），它却起作用了。我甚至包括了Bootstrap JS。 - Ross

Answer 2

请使用.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);
})

Fiddle: http://jsfiddle.net/hxe9ue97/

- Rajan Goswami

Answer 3

在查看您在CodePen上的代码后，我整理出了您的问题并发现您的代码是正确的，实际上问题在于每当您单击按钮时，您实际上并没有单击单选按钮，而是单击了“标签”。每当我删除标签标记时，您的代码就可以完美地工作。这是图片。

.

But I solved your problem by this code :) You can check demo. Also edited your 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>

- Shehroz Ahmed

---

太好了！你的程序完美地运行了！你不知道这是多么棒的事情 - 非常感谢你！ - Ross

Answer 4

使用您的代码，jQuery change() 事件对我来说运作良好：

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

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

可能问题出现在代码的其他部分，而不是这部分。

顺便说一句，最好使用this.value而不是如此复杂的选择器。
它更容易，是DOM属性（原生JS），速度更快，也更易读：

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

- Yeldar Kurmangaliyev

Answer 5

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

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

在我的代码中，要获取值，你只需要使用 $(this).val();。

- Himesh Aadeshara

---

这个没有运行成功。明确一点：什么也没发生。我并不是没有得到值……在控制台上根本就没有任何显示。 - Ross

Answer 6

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

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

我刚测试了一下，点击不同的按钮会返回正确的值。

- M.Scherzer

Answer 7

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

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

演示

- Manwal