Question

我创建了一个包含不同按钮选项的表单。我希望只允许用户选择一个按钮。基本上我在表单中有6个这样的按钮，当你点击它时，按钮颜色变为绿色并表示已选中。现在我可以选择所有的按钮选项，我希望它在我点击其中一个按钮的地方，如果我点击另一个，那么我选择的第一个获取＆＃34;未选中＆＃34;

   <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>

我看到有关＆＃34;如果点击了＃34;我能做些什么我只能有一个活跃的＆＃34 ;?

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()的所有匹配项中排除当前选择，以过滤除点击按钮以外的所有内容。

Answer 2

您可以随时使用按钮和单选按钮

HTML：

<input type="radio" hidden name="_groupname" value="what-gets-submitted" />
<button type="button" class="cstm-rad" onclick="this.previousElementSibling.checked=true;">Custom Radio Button</button>

CSS选择，根据按钮的前面是:checked项来设置按钮的样式：
button.cstm-rad{ /*inactive style*/ }
:checked + button.cstm-rad{ /*active style*/ }

编辑注意：这几乎与我最初提交的解决方案完全相同，只是清除了多余的文本，更多的CSS，并给出了非可怕的命名约定。

Answer 3

我已经创建了一种非常粗略的方法来实现这一点，但基本上你已经拥有它，所以当点击其中一个提交按钮时，它将隐藏所有提交按钮，这样用户就不能再点击它们了。

jsFiddle：https://jsfiddle.net/v2ddpuw6/

Html

<input type="button" value="Submit1" class="Submit"/>
<input type="button" value="Submit2" class="Submit"/>
<input type="button" value="Submit3" class="Submit"/>
<input type="button" value="Submit4" class="Submit"/>
<input type="button" value="Submit5" class="Submit"/>

的jQuery

$(function()
{
    $('.Submit').on('click', function()
  {
    $('.Submit').hide();
  });
});

Answer 4

我检查了你的代码并得到了问题。以下是您正在寻找的工作示例。

请在这里查看代码。

＆＃13;

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

＆＃13;

.active{ 
  background:green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="button-school" value="hidden-springs">
              <h2>Hidden Springs</h2>
              <span class="select-active">SELECT</span>
   </button>

<button type="button" class="button-school" value="hidden-springs">
              <h2>Hidden Springs</h2>
              <span class="select-active">SELECT</span>
   </button>

<button type="button" class="button-school" value="hidden-springs">
              <h2>Hidden Springs</h2>
              <span class="select-active">SELECT</span>
   </button>

＆＃13;

享受!!!!!!!!!!!

一次只允许单击一个按钮

4 个答案:

说明：