按鈕單選

Question

我試圖通過舊的“是或否”方法來選擇HTML表單選項，並且一旦我有了一個運行良好的代碼。 但是現在不是。

我要創建兩個按鈕，每個選項一個，單擊時它們應該成為active類，並且還要更改<input type="hidden">值。

它可以正確更改hidden值，但其作用更像是一個復選框。 我希望它一次只能活躍一次。

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());
     } );
 } );
 });
 });

這是一個JSFiddle。

我想念什么？

請避免簡單的答案。 它可以解決我的問題，但是我想了解什么是錯的或忘記了什么。

Answer 1

單擊按鈕時，您的代碼不會將按鈕標記為“活動”。 您僅在頁面加載時更新狀態。

嘗試這個：

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

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

Answer 2

嘗試這個

$( 'button' , group ).each( function () {
     var button = $( this );

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

Answer 3

@NadeemAfana得到了我所缺少的東西，但是小提琴無法正常工作。 如果還有其他問題，請在此處發布。

刪除了else語句，並添加了$("button").removeClass( 'active' ); 點擊通話后。

在這里測試