读取按钮组切换上的单选按钮值答案

【问题标题】：Read radio button value on button-grp toggle读取按钮组切换上的单选按钮值
【发布时间】：2015-03-29 03:25:15
【问题描述】：

这是How to toggle button in button-group on page load in bootstrap3 with jquery的后续问题

我正在尝试读取按钮组中的单选值。我可以在单击按钮时读取值，但不能在更改触发器上读取。

<body>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default">
            <input type="radio" name="environment" id="staging" value="staging" />Staging
        </label>
        <label class="btn btn-default">
            <input type="radio" name="environment" id="production" value="production" />Production
        </label>
    </div>

    <button class="get-active">Get active</button>

    <script>
        $(document).ready(function() {
            $("#production").parent().button('toggle');
        });
        $('.get-active').click(function() {
            var active = $('.btn-group').find('.active input').val();
            alert( active );
        });
        $("#staging").parent().on('change', function(){
                    var active = $('.btn-group').find('.active input').val();
            alert( active );
              });
    </script>
</body>

这是 plunker - http://plnkr.co/edit/QwGYXNqNczbgTfMhqey5?p=preview

点击从生产切换到暂存时，它显示一个未定义的警报，点击按钮显示暂存。

【问题讨论】：

标签： javascript jquery twitter-bootstrap-3

【解决方案1】：

这里的问题是我认为change 被触发时没有添加.active input 类。稍后会添加它。所以它没有找到价值。如果这个解决方案对你有用，我不知道，但你可以做这样的事情。为按钮定义一个类。例如：

<label class="btn btn-default">
            <input type="radio" name="environment" id="staging" class="radioClass" value="staging" />Staging
        </label>
        <label class="btn btn-default">
            <input type="radio" name="environment" id="production" class="radioClass" value="production" />Production
        </label>

然后在该类上的 jquery 调用更改

$('.radioClass').on('change', function(){
                    var active = $(this).val();
            alert( active );
              });

http://plnkr.co/edit/9mnbGFhukwWVZSmwq2qZ?p=preview

【讨论】：

谢谢。这个解决方案奏效了。但保持开放，看看是否有其他人知道根本原因，或者是否有更好的解决方案。