javascript - 按钮单选选项

Question

我正在尝试通过旧的“是或否”方式创建一个 HTML 表单选项，一旦我有了一个运行良好的代码。但现在不是了。

我想制作两个按钮，每个选项一个，它们应该得到 active单击时的类，并更改 <input type="hidden">值(value)。

它正确地改变了 hidden 的内容value 是，但它更像是一个复选框。我希望它一次只有一个处于事件状态。

HTML:

<div class="controls">
  <div class="btn-group" data-toggle="buttons-radio" data-toggle-name="lab">
    <button class="btn btn-primary" value="TRUE"
            type="button" checked>Yes</button>
    <button class="btn btn-danger" value="FALSE"
            type="button">No</button>
  </div>
  <input type="hidden" name="lab" id="lab">
</div>

JavaScript

 jQuery( function ( $ ) {
$( 'div.btn-group[data-toggle="buttons-radio"]' ).each( function () {
 var group = $( this );                    
 var name = group.attr( 'data-toggle-name' );
 var hidden = $( 'input[name="' + name + '"]');
 $( 'button' , group ).each( function () {
     var button = $( this );
     if ( button.val() == hidden.val() ) {
         button.addClass( 'active' );
     }else{
         button.removeClass( 'active' );
     }
     button.click(function () {                        
         hidden.val($( this ).val());
     } );
 } );
 });
 });

Here目前是 JSFiddle。

我错过了什么？

请避免简单的回答。它可以解决我的问题，但我想了解哪里出了问题或我忘记了什么。

Answer 1

单击按钮时，您的代码不会将按钮标记为“事件”。您仅在页面加载时更新状态。

试试这个:

http://jsfiddle.net/y2Mbg/4/

 button.click(function () {  
     $("button").removeClass( 'active' );
     hidden.val($( this ).val());
      $(this).addClass( 'active' );
 } );