3

在我的网络应用程序 (c#/MVC3) 中，我的表格中有大量复选框。而不是一个复选框表，我希望它看起来像一堵切换按钮的墙。对于用户来说，我希望它看起来像一堵按钮墙，当他们点击一个按钮时，它会被“选中”并且按钮会改变颜色。

我不确定是否有 CSS 可以使复选框执行此操作（看起来像一个按钮并在检查时更改颜色而不是显示复选标记），或者我是否必须使用按钮和 javascript/jquery 的某种组合和隐藏的复选框或什么。

4

4 回答 4

2

jQuery UI Button 小部件可以处理：

http://jqueryui.com/button/#checkbox

于 2012-12-07T21:57:52.830 回答
1

是的，使用纯 CSS 绝对可以做你想做的事。

我认为您应该查看此问题中提到的 jsFiddle。

于 2012-12-07T22:31:38.537 回答
0

单选按钮由操作系统生成，无法轻松设置样式。

如果你想要一些不同的东西，你需要使用 CSS/images 和 JavaScript 来生成它。

于 2012-12-07T21:58:17.067 回答
0

首先，出于可用性考虑，我实际上会避免这样做，但如果您仍然想继续阅读。

这实际上很难实现，但这是可能的。我的解决方案避免了为您的复选框分配单个 ID 的需要。

本质上，您将需要一个用于“on”和“off”状态的图像精灵，您将使用切换类使用 CSS background-position 属性定位它们。然后，下面的 jQuery 将允许您不仅交换图像状态，还可以确认相应的复选框为选中或未选中以使用表单。请注意，“实际”复选框从视图中隐藏，但功能仍然存在。

<form>
    <input type="checkbox" class="custom" />
</form>

<style type="text/css">
.checkbox {
    clear:left;
    float:left;
    background:url('your_image');
    background-position:top;
    width:20px;
    height:20px;
    display:block;
}
.toggled {
    background-position:bottom !important;
}
</style>

$(document).ready(function () {
    var checkboxes = $('form .custom'),
        custom = $('<span></span>').addClass('checkbox');
    checkboxes.before(custom);
    checkboxes.css('visibility', 'hidden');
    $('.checkbox').click(function () {
        $(this).toggleClass('toggled');
        var isChecked = $(this).next(':checkbox');
        var value = isChecked.prop('checked') ? 'true' : 'false';
        if (value == 'false') {
            isChecked.prop('checked', true);
        } else {
            isChecked.prop('checked', false);
        }
    });
});

当然，您必须编辑 CSS 以满足您的确切需求。我希望这会有所帮助，因为这项任务看似不平凡。

于 2012-12-08T00:01:10.130 回答