javascript - 一次只允许点击一个按钮

Question

我正在创建一个具有不同按钮选项的表单。我希望用户只能选择一个按钮。基本上我在表单中有 6 个这样的按钮，当您单击它时，按钮颜色变为绿色并显示已选中。现在我可以选择所有按钮选项，我希望它在我单击其中一个按钮时出现，如果我单击另一个按钮，那么我选择的第一个按钮将“未选中”

   <button type="button" class="button-school" value="hidden-springs">
              <h2>Hidden Springs</h2>
              <span class="select-active">SELECT</span>
   </button>

我只发布了其中一个按钮，但它们都是相同的，具有不同的值和 h2 值。我试图在网上找到一些东西来帮助我，但我真的只看到了单选按钮的东西，这是我自己制作的。

这是我目前所拥有的:

<script>
jQuery('.button-school').click(function() {
  jQuery(this).toggleClass('active');
  if (jQuery(this).hasClass('active')) {
    jQuery(this).html(jQuery(this).html().replace('SELECT', 'SELECTED'));
  } else {
    jQuery(this).html(jQuery(this).html().replace('SELECTED', 'SELECT'));
  }
});

</script>

我看到有关“如果单击”的内容，我可以做一些只能有一个“事件”的事情吗？

Answer 1

jQuery(function($) {
  $('.button-school').click(function() {
    $('.button-school').not(this).removeClass('active').html(function() {
      return $(this).html().replace('SELECTED', 'SELECT');
    });
    $(this).addClass('active').html(jQuery(this).html().replace('SELECT', 'SELECTED'));
  });
});

JSFiddle: https://jsfiddle.net/TrueBlueAussie/v2ddpuw6/2/

注意事项:

• jQuery(function(){}) 是 DOM 就绪处理程序的快捷方式，它也将自身作为第一个参数传递。这样您就可以避免加载 jQuery 并安全地使用 $。
• 如果您将 html() 与函数一起使用，返回值将用于替换现有的 html。
• 您可以使用 not() 从所有匹配项中排除当前选择，以过滤除单击按钮之外的所有匹配项。