使用 Twitter Bootstrap 切换单选按钮，获取表单输入的简洁方式是啥？

Posted 2023-03-05

【中文标题】使用 Twitter Bootstrap 切换单选按钮，获取表单输入的简洁方式是啥？

【英文标题】：With Twitter Bootstrap toggle radio buttons, what's the clean way to get form input?使用 Twitter Bootstrap 切换单选按钮，获取表单输入的简洁方式是什么？

【发布时间】：2012-07-13 13:47:40

【问题描述】：

我正在使用 Twitter Bootstrap 的 javascript radio toggle buttons 并希望根据切换的状态获取表单输入。

我能找到的最简单的方法是在按钮中添加一个不可见的标签——有人抛出的here's the helpful jsFiddle 示例。

它工作得很好，但它仍然有点杂乱无章。我的问题是：从这些按钮获取表单输入的干净方式是什么，即没有额外的隐藏单选输入？

【参考方案1】：

怎么样

$(this).children('input[name="is_private"]').val()

DEMO

我想我第一次看错了您的问题...您可以创建一个隐藏的表单元素（除非您使用 AJAX，否则您在提交表单时需要它来访问值）并使用 JS 来设置它的值。

HTML

<input type="hidden" name="status" id="status" value="" />

JS

$('div.btn-group button').click(function()

    $("#status").attr('value', $(this).attr('id'));

)​

DEMO

【讨论】：

嘿，谢谢，但是需要一个隐藏的单选按钮似乎很麻烦。没有那些隐藏的单选按钮有没有办法做到这一点？

您至少需要一个隐藏输入。我已经更新了我的答案。

明白了。所以没有办法绕过隐藏的输入。拥有一个实际隐藏的输入，而不是通过 CSS 使其不可见，这肯定不那么笨拙。我希望在没有额外 JS 的情况下做到这一点，但毕竟我使用的是 Bootstrap 的 JS 按钮......谢谢！

【参考方案2】：

其实你可以像这样使用index()函数来避免html输入元素和css：

$('div.btn-group .btn').click(function()
    if ($(this).index() != $('div.btn-group .btn.active').index())
        alert($(this).index());
    
)​;

我还添加了一个条件，如果已选择活动按钮，则不会收到警报。

【讨论】：

谢谢 - 但这并没有给我一个与表单一起发布的输入值。

您可以在按钮中添加value 属性并使用jquery.post() 发布这些值

Gotcha，为这种方法 +1，我很高兴知道这一点，但必须手动获取所有正常的表单输入以及特殊的单选按钮似乎并不优雅。我想我刚刚接受了您需要输入才能使普通表单帖子无缝工作，并且隐藏输入还不错（尤其是当我通过 Django 小部件自动创建和处理它们时）。跨度>

【参考方案3】：

一个与普通形式的 POST 以及 AJAX 一起工作的解决方案是有一个隐藏的输入字段来表示按钮组的当前状态。然后，您可以使用以下标记结构来处理所有这些按钮组：

<form>
    <div id="test-group" class="btn-group" data-toggle="buttons-radio" data-toggle-name="testOption">
        <input type="hidden" name="testOption"/>
        <button type="button" class="btn" data-toggle-value="one">One</button>
        <button type="button" class="btn" data-toggle-value="two">Two</button>
    </div>
</form>

以及以下 Javascript 来设置页面上的任何按钮组：

$(function () 
$('div.btn-group[data-toggle-name]').each(function () 
    var group = $(this);
    var form = group.parents('form').eq(0);
    var name = group.attr('data-toggle-name');
    var hidden = $('input[name="' + name + '"]', form);
    $('button', group).each(function () 
        $(this).on('click', function () 
            hidden.val($(this).data("toggle-value"));
        );
    );
);
);

Try it out on jsFiddle​