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

Question

这是

的跟进问题

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

<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

单击从生产切换到登台时，它显示未定义的警报，单击该按钮显示登台。

Answer 1

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

<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 调用更改 class

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

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

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

Read radio button value on button-grp toggle

javascript

jquery

twitter-bootstrap-3