Question

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

单击切换到生产中的暂存，它会将警报显示为未定义，单击按钮会显示暂存。

Answer 1

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

<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

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

1 个答案: