Javascript 按钮单选选项

我正试图通过旧的“是或否”方式来创建一个HTML表单选项，一旦我有了一个运行良好的代码。但现在，情况并非如此

我想制作两个按钮，每个选项一个，当单击它们时，它们应该被激活，并更改

值

它正确地更改了

隐藏的

值，但它更像是一个复选框。我希望它一次只激活一个

HTML:

她是一位女士

我错过了什么

请不要只回答简单的问题。它可以解决我的问题，但我想知道什么是错的，什么是我忘记的。

试试这个

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

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

---

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

试试这个：

---

@NadeemAfana得到了我丢失的东西，但小提琴坏了。如果其他人遇到同样的问题，请在此处发布

删除了

else

语句并添加了

$（“按钮”）.removeClass（'active'）在点击呼叫之后

它本身具有相同的行为，并且在它内部不会改变类。如果单击它时我没有标记它们，我如何单击并看到正在添加的类？当您单击任何按钮时，您需要将该按钮标记为活动，并取消标记所有其他按钮（删除活动类）。顺便说一下，我看不到你的小提琴。点击跑步按钮。我知道，我的意思是，它没有做它应该做的。
 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());
     } );
 } );
 });
 });

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

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

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