Question

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

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

Answer 1

jQuery UI Button小部件可以处理：

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

Answer 2

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

我认为你应该查看this问题中提到的jsFiddle。

Answer 3

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

如果你想要不同的东西，你需要使用CSS /图像和JavaScript生成它。

Answer 4

首先，我实际上是因为可用性问题而避免这样做，但是如果你还想继续读下去的话。

这实际上很难实现，但它是可能的。我的解决方案无需为您的复选框分配单独的ID。

基本上，您将需要一个图像精灵用于“开”和“关”状态，您将使用切换类使用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以满足您的确切需求。我希望这会有所帮助，因为这项任务看似非常重要。

使复选框看起来像按钮

4 个答案: