<Input type="button>，我怎么知道它们什么时候激活？[重复]答案

【问题标题】：<Input type="button>, How can I know when are they active? [duplicate]<Input type="button>，我怎么知道它们什么时候激活？[重复]
【发布时间】：2017-12-17 00:24:30
【问题描述】：

我有这个 HTML

<div class="btn-group">
     <input type="button" name="meat" class="btn btn-default active" value="Both">
     <input type="button" name="meat" class="btn btn-default" value="Red">
     <input type="button" name="meat" class="btn btn-default" value="White">
     <input type="button" name="meat" class="btn btn-default" value="None">
</div>

这加上 os 一些 css 给出了这个结果：

我使用此代码只允许一个活动：

 $(".btn-group > .btn").click(function(){
     $(this).siblings().removeClass("active");
     $(this).addClass("active");
 });

但这只是视觉效果，当我尝试通过 php POST（在表单内）输入时，我什么也得不到。

如果我更改为 type=radio，PHP 可以正常工作，但更丑。

¿有什么神奇的想法让它保持花哨吗？

测试用的php代码为：

<html>
<body>

MegaUltraTest <?php echo ($_POST["meat"]); ?>

</body>
</html>

谢谢。

【问题讨论】：

“如果我更改为 type=radio，PHP 可以正常工作，但它更丑。” 所以设置单选按钮的样式，使其与上面的按钮一样工作。看起来你正在使用 Bootstrap，所以使用 Bootstrap 的样式。
您可以随时将按钮类添加到您的收音机中
使用<input type="hidden" id="meat" name="meat"/> 并在按钮的onclick 事件中设置它的值。它的值将在您发布页面时传输。
我正在尝试收音机样式，似乎是一个简单的解决方案，我现在觉得很愚蠢 XD Thx

标签： php html input

【解决方案1】：

'btn-group' div 中的这些按钮除了在屏幕上显示一些按钮外，没有任何用处。他们不知道任何“选定”属性（为了提交选定的值）。

按钮的作用并不像单选按钮、复选框等。它们的目的是在单击时执行操作。

所以我建议忘记按钮组，只添加复选框。如果您关心样式，只需添加这个非常有用的库 (http://icheck.fronteed.com/)。我认为线条皮肤会很适合你。

如果你真的想要这些按钮，你应该编写一些 js 代码（最好是 jquery）并在点击事件中，将选定的值存储在将被提交的隐藏输入中。请参阅此处：使用 jquery/javascript 更改隐藏输入的值

来源：Send Bootstrap Button-Group value in a form with Get or Post 通过 nkwinder

【讨论】：

谢谢，我一直在寻找几个小时：D
欢迎您 ;-)

【解决方案2】：

您可以检查$_POST['meat'] 是否存在并检查该值是否等于它：像这样实现它：

<div class="btn-group">
     <input type="button" name="meat" class="btn btn-default <?= isset($_POST['meat']) && $_POST['meat'] === 'Both' ? 'active' : ''; ?>" value="Both">
     <input type="button" name="meat" class="btn btn-default" value="Red">
     <input type="button" name="meat" class="btn btn-default" value="White">
     <input type="button" name="meat" class="btn btn-default" value="None">
</div>

【讨论】：