jjzjj

php - 推特 Bootstrap : Get state of bootstrap checkbox buttons

coder 2024-01-04 原文

如何获取在 Bootstrap 中按下的按钮的“状态”？

即我正在使用这段代码，它使按钮像复选框一样“切换”:

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

来自 the bootstrap manual here.

但是我随后单击提交按钮 - $_POST 中不包含任何数据。我怎么知道选择了哪个按钮？

我已经尝试将 'value="1"name="1"' 等添加到按钮 - 但仍然没有。

编辑:这是完整的解决方案，我可以使用下面 Felix 的帮助创建它。

<form method="post" action="" id="mform" class="form-horizontal">
 <div class="btn-group" data-toggle="buttons-checkbox">
   <button type="button" name="left"   value="1" class="btn btn-primary">Left</button>
   <button type="button" name="middle" value="1" class="btn btn-primary">Middle</button>
   <button type="button" name="right"  value="1" class="btn btn-primary">Right</button>
 </div>
 <button type="submit" class="btn">Submit</button>
</form>

<script>
    $('#mform').submit(function() {
        $('#mform .btn.active').each(function() {
             var input = document.createElement("input");
             input.setAttribute("type", "hidden");
             input.setAttribute("name", this.name);
             input.setAttribute("value", this.value);
             document.getElementById("mform").appendChild(input);
         });
    });
 </script>

最佳答案

“选中”的按钮将附加 active 类。然后，您可以使用 jQuery 仅选择这些按钮。由于 button 是表单元素，它们可以具有 name 和 value 属性，最好利用这些属性。

例子:

var data = {};

$('#myButtonGroup .btn.active').each(function() {
    data[this.name] = this.value;
});

要将数据发送到服务器，您可以使用 Ajax 并手动设置数据/将其与其他表单数据(如果存在)合并。

如果您想使用“传统”表单提交，您也可以尝试将值镜像到提交时的隐藏表单元素中(参见 Change form values after submit button pressed)。

关于php - 推特 Bootstrap : Get state of bootstrap checkbox buttons，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14035640/

Bootstrap34buttoncodephptwitter-bootstrap

有关php - 推特 Bootstrap : Get state of bootstrap checkbox buttons的更多相关文章

  1. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  2. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  3. ruby-on-rails - 这个 C 和 PHP 程序员如何学习 Ruby 和 Rails？ - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。我来自C、php和bash背景，很容易学习，因为它们都有相同的C结构，我可以将其与我已经知道的联系起来。然后2年前我学了Python并且学得很好，Python对我来说比Ruby更容易学。然后从去年开始，我一直在尝试学习Ruby，然后是Rails，我承认，直到现在我还是学不会，讽刺的是那些打着简单易学的烙印，但是对于我这样一个老练的程序员来说，我只是无法将它

  4. ruby-on-rails - 在表单中使用来自 Twitter Bootstrap 的 Typeahead (formtastic) - 2

    我如何像这样从Bootstrap中集成typeahead:变成这样的标准形式: 最佳答案 在你的Controller中defindex@autocomplete_items=Model.allend在您看来，就像您为选择器添加了一个额外的ID...最重要的是，将Controller中定义的@autocomplete_items实例变量传递给View中的Javascript变量:这将序列化您的数据并使其成为可用于Typeahead函数的JSON。至于Typeahead，只需将该对象(@autocomplete_items)作为JSON

  5. ruby-on-rails - 将 Bootstrap 图标添加到 Ruby on Rails 中的按钮 - 2

    我想在RubyonRails中为按钮添加图标。目前我尝试了以下方法:"),{:controller=>'events',:action=>"upvoteEvent",:method=>"put",:id=>@event.id,:uid=>current_user.id},{:class=>"btnbtn-success"}%>生成以下html:"/>我遵循了此处发布的解决方案:https://stackoverflow.com/a/10468935/1385324，但这对我不起作用。我还测试了BootstrapCSS是否正常工作，只需在网站的其他任何地方插入一个图标即可。感谢您的帮助!

  6. css - 在 rails 中使用 Bootstrap Sass 时出错 - 2

    我正在开发一个简单的ruby​​onrails应用程序，但出现以下错误:TypeError:无法读取未定义的属性“进程”(在/home/saasbook/Documents/projects/Bookkeeper/app/assets/stylesheets/application.css.sass)提取的源码如下:Bookkeepertrue%>//Highlightederrorlineinextracttrue%>此错误发生在我使用BootstrapSass插件添加BootstrapSass并遵循此tutorial之后摘录下方指出错误位于:app/views/layouts/ap

  7. ruby-on-rails - Rails/Bootstrap - Flash 通知 :success is now red and not green? - 2

    我一直试图在这里寻找答案，但我找不到任何有用的东西。我已经对我的Rails应用程序实现了:success和:dangerflash通知。它工作得很好，即:success是绿色的，:danger是红色的，有一个关闭按钮等等，但是自从添加了一些邮件文件后，我的:success现在显示为红色？application.html.erb摘录:×contact_mailer.rbclassContactMailercontacts_controller.rbclassContactsController还有，contact_email.html.erbNewMessagefromHoo

  8. ruby - 使用指南针安装 bootstrap sass - 2

    我正在尝试安装bootstrap-sass并收到以下错误。我试过旧版本的sass，但bundler一直在安装3.3.0。WARN:UnresolvedspecsduringGem::Specification.reset:sass(~>3.2)WARN:Clearingoutunresolvedspecs.Pleasereportabugifthiscausesproblems./Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches/browser_support.r

  9. ruby-on-rails - Bootstrap 的 ruby gem 有什么区别？ - 2

    gem有什么区别:bootstrap-sass(下载量8,309,861)bootstrap-sass-rails(下载量236,886)twitter_bootstrap_sass(下载量6,011)在Rails应用程序中使用哪个gem更好？ 最佳答案 twitter_bootstrap_sass是社区提供的第一个bootstrapgem。它已被弃用，不再使用。bootstrap-sass-rails是官方的Bootstrapgem。它由社区提供并得到推特的认可，直到它在2014年被弃用并被下面的bootstrap-sass取代b

  10. ruby-on-rails - Rails 还是 Sinatra？ PHP程序员入门学习哪个好？ - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。我使用PHP的时间太长了，对它感到厌倦了。我也想学习一门新语言。我一直在使用Ruby并且喜欢它。我必须在Rails和Sinatra之间做出选择，那么您会推荐哪一个？Sinatra真的不能用来构建复杂的应用程序，它只能用于简单的应用程序吗？

随机推荐