Question

我正在使用Twitter Bootstrap和Joomla 3.0，并且我需要将表单重置为默认值。简单form.reset();适用于除radio btn组之外的所有元素。

我的意思是，收音机会重置，但标签状态不会改变。我几乎没有尝试重置它，但由于模糊的btn类名称而导致它失败。我尝试在具有超过50个单选按钮选项的表单中使用id来定位具有id的字段集组，但效果不佳。他们的颜色最终会变得不同等等。

我将不胜感激任何帮助

这里有小例子

http://jsfiddle.net/DZ7HL/31/

将无线电转为btn-group 的js来自joomla默认管理员模板和我无法移除/编辑或更改，如果这会导致我遇到一些麻烦找到这种方式与js存在一起工作。我有自己的js文件，如果有任何帮助，那么在该文件后加载

Answer 1

这似乎是joomla对标签的奇怪“逻辑”。它为标签添加了一些类，你可以轻松地重置radiogroup，但是“手动”添加的类保留，所以你必须删除它们。

所有“默认值”都是＃2选项，对吧？这是执行该操作的通用函数

// FROM HERE IS CHANGABLE
function resetRadioGroup(groupname) {
switch($("input[name='"+groupname+"']:eq(1)").val()) {
    case '' : var css='btn-primary'; break;
    case '0': var css='btn-danger'; break;
    default : var css='btn-success'; break;
}
$("input[name='"+groupname+"']").next().removeClass('active btn-success');
$("input[name='"+groupname+"']:eq(1)").prop("checked", true).next().addClass('active '+css);
}

$('#reset_form').click(function() {
    $('#myform')[0].reset();
    resetRadioGroup('radio_test');
    resetRadioGroup('radio2_test');
})

已将其分配到http://jsfiddle.net/AtL5q/

<强>更新鉴于所有无线电组都在具有类btn-group的字段集中，您可以自动调用resetRadioGroup函数：

$('#reset_form').click(function() {
    $('#myform')[0].reset();
    $('fieldset.btn-group').each(function() {
      resetRadioGroup($(this).find('input').first().attr('name'));
    });
})

http://jsfiddle.net/3aU4F/

Answer 2

我去的解决方案是

// FROM HERE IS CHANGABLE
$('#reset_form').click(function() {

    $('#myform')[0].reset();


    $(".btn-group label:not(.active)").change(function() {
        var label = $(this);
        var input = $('#' + label.attr('for'));

        if (input.prop('checked')) {
            label.closest('.btn-group').find("label").removeClass('active btn-success btn-danger btn-primary');
            if (input.val() == '') {
                label.addClass('active btn-primary');
            } else if (input.val() == 0) {
                label.addClass('active btn-danger');
            } else {
                label.addClass('active btn-success');
            }
        }
    }).change();




})

如图所示，jsfiddle.net/Yt9uX/41所以你有它我相信它会对使用joomla 3.0的任何人或使用btn组用于无线电的bootsrtap表格派上用场

重置Twitter Bootstrap表单单选按钮组。怎么样？

2 个答案: