11

我有以下 HTML 使用 Bootstrap 创建单选按钮组。

<div class="btn-group" data-toggle="buttons-radio">
  <button class="btn" type="button" name="rating" value="1">
    <img ...>
  </button>
  <button class="btn" type="button" name="rating" value="2">
    <img ...>
  </button>
  <button class="btn" type="button" name="rating" value="3">
    <img ...>
  </button>
  <button class="btn" type="button" name="rating" value="4">
    <img ...>
  </button>
</div>

<button class="btn" type="submit" name="submit">Submit</button>

根据用户选择，我想从名为“rating”的单选组中以表单形式发送变量，并将值分配给所选按钮的值。我将如何在 jQuery 中执行此操作？

4

5 回答 5

15 
$('button[name="rating"].active').val();

用简单的英语来说，选择内容如下：

  • 给我价值
  • button元素
  • name按具有rating值的属性（组）过滤
  • 和 CSS 类active（表明它已被选中）

根据评论中OP的新问题进行编辑：

要从按钮捕获输入，您需要使用自定义脚本处理程序。如果您的目标是实际将其与表单一起提交，我实际上建议您反对它。主要是因为这不是用户在表单中所期望的。只需使用常规单选按钮输入。

但是，如果您确实想使用它，您可以执行以下操作：

$('form').submit(function() {
    var rating = $('button[name="rating"].active').val();  

    // get the rest of the values
    // submit the form
});​

这是一个常规input与 the的示例，button以及为什么您不应该在表单中使用该按钮：http: //jsfiddle.net/TxgVe/1/

于 2012-04-23T06:23:56.603 回答
3

好消息！

Bootstrap 3 现在使用input type="radio"按钮组！

但是，如果您不想升级，请参阅下面的答案：

我正在使用以下 jQuery：

$('[data-toggle="buttons-radio"]').children(".btn").click(function(){
    var value = $(this).val();
    $(this).parent().next().val(value);
    $(this).parent().next().valid(); // Remove this if you're not using jQuery Validation
});

为此，您需要做的就是确保button在.valueinputtype="hidden"type="text"btn-group div

我注意到，如果您提交表单然后点击后退按钮，所有表单数据仍然存在，包括隐藏的输入，但按钮不会处于活动状态。为了解决这个问题，添加这个额外的 jQuery：

$('[data-toggle="buttons-radio"]').each(function(){
    var that = $(this);
    var value = that.next().val();
    if(value != "") {
        that.children("button[value="+value+"]").addClass("active");
    }
});
于 2013-07-23T14:28:57.060 回答
3

尝试这个。它对我有用。我有一个巨大的表格多次工作。

<div class="btn-group" data-toggle="buttons-checkbox">
<button onclick="javascript:document.getElementById('INPUT_ID').value='1'" type="button" class="btn">CHECK ME</button>
</div>
<input type="hidden" id="INPUT_ID" name="INPUT_ID" value="" />
于 2012-10-09T11:40:31.367 回答
3

这是我的解决方案：http: //jsfiddle.net/tFYV9/1/

编辑 （来自 jsFiddle 的代码）

HTML

<input type="text" id="hidden_ipt" value="0" />
<div class="btn-group" data-toggle="buttons-radio" data-target="hidden_ipt"> 
  <button type="button" class="btn" data-toggle="button" value="female">
    female  
  </button>
  <button type="button" class="btn" data-toggle="button" value="male">
    male
  </button>
</div>​

JavaScript

// Bootstrap Hack
var _old_toggle = $.fn.button.prototype.constructor.Constructor.prototype.toggle;
$.fn.button.prototype.constructor.Constructor.prototype.toggle = function(){
  _old_toggle.apply(this);
  var $parent = this.$element.parent('[data-toggle="buttons-radio"]')
  var target = $parent ? $parent.data('target') : undefined;
  var value = this.$element.attr('value');
  if(target && value){
    $('#'+target).val(value);
  }
}
于 2012-09-20T08:23:49.307 回答
1

您可以使用我的插件bootstrap-form-b​​uttonset来设置收音机或复选框以引导按钮组。它与 Bootstrap 2 和 Bootstrap 3 兼容。

只需编写普通的旧无线电输入，将它们包装在一起并调用$('.my-wrapper').bsFormButtonset('attach'). 而已。

于 2014-02-02T19:52:29.680 回答