大小复选框答案

【问题标题】：size checkboxes大小复选框
【发布时间】：2009-08-27 20:18:17
【问题描述】：

是否可以使复选框变大？到目前为止，我读过的消息来源说这几乎是不可能的。

我已经尝试过 Cssclasses，但它也不起作用。我不想作弊并使用文本框。

如何使复选框变大？

【问题讨论】：

标签： c# asp.net vb.net visual-studio

【解决方案1】：

您可能需要用 JavaScript 替换图像并提交一个隐藏字段。

这是一个非常原始（未经测试）的示例，但它只是为了给您一个想法。如果您正在做一个复选框列表，那么您将不得不对您存储在隐藏字段中的值感兴趣，例如在 JavaScript 中维护一个数组并使用串联列表更新隐藏字段。

<img src="checked.gif" onclick="toggle()" id="imgCheck"/>
<input type="hidden" id="hdnValue" value="true"/>
<script>
function toggle() {
   var hdnValue = document.getElementById('hdnValue');
   var imgCheck = document.getElementById('imgCheck');
   if(hdnValue.value == 'true') {
      hdnValue.value = 'false';
      imgCheck.src = 'unchecked.gif';
   }else{
      hdnValue.value = 'true';
      imgCheck.src = 'checked.gif';
   }
}
</script>

希望对您有所帮助。

【讨论】：

【解决方案2】：

考虑一下复选框是标准表单元素的事实，用户通常知道如何与它们交互。更改它们（通过使它们变大、样式或其他方式）会破坏这种常见的习得行为，并可能导致您的用户错误地填写表单。

更不用说，正如您所发现的那样，这是一件令人头疼的事情。

如果您试图提供更大的区域供用户检查，请考虑使用<label> 元素，这将允许复选框的支持文本充当触发器。

【讨论】：

ASP.NET（Web 表单）在您使用复选框控件时呈现标签，如下所示：一些描述。同时拥有复选框和标签可点击漏洞利用的菲茨定律，这是一件好事。
我很确定是这样，但我绝不是 ASP.NET 人。
这对回答问题没有任何帮助。这可能是一个有效的观点，但不能回答问题。

【解决方案3】：

是的，using css：

<input type="checkbox" class="largerCheckbox" name="checkBox">

<style type="text/css">
input.largerCheckbox
{
    width: 30px;
    height: 30px;
}
</style>

这适用于 IE、Firefox 和 Chrome (2.0.172.43)，但不适用于 Safari 和 Opera。

如果您的目标只是使复选框的可点击区域更大，您可以使用标签：

<asp:CheckBox runat="server" ID="foo" />
<asp:Label runat="server" AssociatedControlID="foo">Click me</asp:Label>

这将在单击标签时切换复选框。

【讨论】：

刚刚在 IE、Firefox 和 Chrome 中测试过，它根本不起作用……它只是在复选框周围添加了填充。
这只会使我的可点击区域变大。不影响文本框的物理大小
@blesh：哈，真的吗？我刚刚在 IE6、FF2 和 Chrome 2 中进行了测试，效果很好。我想你在 Windows 上？奇怪...
@Eric：等等，你指的是什么文本框？该演示中只有一个复选框。
Vista，是的。刚刚在 Windows 2003 和 Windows XP 上测试过......它确实可以在那里工作。大声笑...

【解决方案4】：

我没有在每个浏览器上都测试过，但我发现复选框控件呈现为跨度标记，跨度内是复选框。

因此，即使您将 cssclass 或样式应用于 asp:checkbox，它实际上也会应用于 span，而不是复选框。

所以，我发现这对我有用：

<input type="checkbox" class="largerCheckbox" name="checkBox">
<style type="text/css">
    .largerCheckbox input{    
         width: 30px;    
         height: 30px;
    }
</style>

这类似于其他用户发布的内容，但它会导致样式应用于复选框而不是其包含范围。

【讨论】：

【解决方案5】：

某些浏览器不允许您对复选框或单选按钮的呈现方式进行太多（或在某些情况下，任何事情）更改，并且在任何情况下在浏览器之间都是不一致的。你最好用一种行为来代替。

有很多这样的。如果你使用 jQuery，会有类似Customize HTML control with jQuery (Checkbox + Radio)

【讨论】：

【解决方案6】：

在 asp.net 中，一个复选框将变成一个带有“复选框”类型输入的跨度

为了调整它的大小，只需将 css 类应用于 asp.net 复选框并将其添加到您的样式表中。样式必须应用于复选框的嵌入输入，如下所示：

.ChkBoxClass 输入 {width:25px;高度：25px;}

【讨论】：