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

Here是妈妈的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' );。

Test it here

按钮无线电选项

3 个答案: