Asp.net 使复选框看起来像按钮

在我的web应用程序（c#/MVC3）中，我的表格中有一组巨大的复选框。与其说是一张复选框的表格，不如说它看起来像是一堵由切换按钮组成的墙。对用户来说，我希望它看起来像一堵按钮墙，当他们点击一个按钮时，它会被选中，按钮会改变颜色

---

我不确定是否有CSS可以使复选框做到这一点（看起来像一个按钮，并在复选框上更改颜色，而不是显示复选标记），或者我是否必须使用一些按钮和javascript/jquery以及隐藏复选框的组合，或者什么

jQuery UI按钮小部件可以处理：

---

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

---

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

是的，完全可以用纯CSS来做你想做的事情

---

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

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

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

本质上，您将需要一个图像精灵，用于“打开”和“关闭”状态，您将使用CSS背景位置属性，使用切换类来定位这些状态。然后，下面的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);
        }
    });
});

.复选框{
清除：左；
浮动：左；
背景：url（“你的图片”）；
背景位置：顶部；
宽度：20px；
高度：20px；
显示：块；
}
.切换{
背景位置：底部！重要；
}
$（文档）.ready（函数（）{
var复选框=$（'form.custom'），
自定义=$（''）.addClass（'checkbox'）；
复选框。之前（自定义）；
css（‘可见性’、‘隐藏’）；
$（'.checkbox'）。单击（函数（）{
$（this.toggleClass（'toggled'）；
var isChecked=$（this）.next（':checkbox'）；
var value=isChecked.prop（'checked'）？'true'：'false'；
如果（值='false'）{
isChecked.prop（'checked'，true）；
}否则{
isChecked.prop（'checked'，false）；
}
});
});

---

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

请查看此内容-这并不是您问题的答案，但我强烈建议您不要这样做。事实上，我对这个主题进行了广泛的可用性测试，几乎0%的人注意到了复选框，除非它们看起来像原生HTML复选框。我甚至写了一篇关于这个主题的文章。谢谢用户1394965！“那正是我要找的。”乔希·布莱德说，“没关系。介意我把它作为答案，这样你就可以接受了吗？：）@user1394965，我没问题。我想user1394965对我原始问题的评论中的javascript就是我想要的。我正在看jQueryUI按钮的演示，它看起来很酷。不过，至少在演示中，为了选择多个按钮，您可以使用ctrl-click或shift-click，这是我不希望看到的。