checkbox 相关问题

我可以使用 unicode 字符设置复选框样式而不使用 ::before 和 ::after 吗？

我想用 unicode 复选框标记替换复选框的内容。但我已经需要 ::before 和 ::after 来做其他事情了。有没有一种CSS方式可以改变标签本身的内容？ 呃...

.net maui 复选框复选标记颜色

我的 XAML 中有以下检查 我的 XAML 中有以下检查 <StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="15" BackgroundColor="Yellow"> <CheckBox IsChecked="{Binding SuperUser , Mode=TwoWay}" Color="White" BackgroundColor="Green" /> <Label Style="{StaticResource CheckBoxText}" Margin="0,0,0,0" Text="{x:Static strings:Strings.config_super_user}"/> </StackLayout> 结果几乎就是我们想要的，如下所示： 因此，通过设置复选框的背景颜色，我们可以影响复选标记的颜色。 我面临的挑战是复选框周围的所有额外背景颜色（超出复选框“颜色”区域的绿色）。 知道如何摆脱它吗？ 您可以完全构建自己的 CheckBox 外观，只需将原始设置设置为 Opacity=0，然后在其下方绘制自己的外观。这将使您完全控制背景、复选标记形状、颜色等。 <Grid HeightRequest="32" WidthRequest="32"> <Frame BackgroundColor="Transparent" BorderColor="Green" CornerRadius="5" HeightRequest="20" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="20"> <Frame.Triggers> <DataTrigger Binding="{Binding IsChecked, Source={x:Reference checkBox}}" TargetType="Frame" Value="True"> <Setter Property="BackgroundColor" Value="Green" /> </DataTrigger> </Frame.Triggers> </Frame> <Path Data="M 10 16 l 4 4 l 6 -6" IsVisible="{Binding IsChecked, Source={x:Reference checkBox}}" Stroke="White" /> <CheckBox x:Name="checkBox" Opacity="0" /> </Grid>

根据组名中选定的复选框生成值

目前，我有一个 VBA 代码，可以根据用户窗体将 Solidworks 装配体中一定数量的 .SLDPRT 文件保存为 .STEP 或 .X_T 文件。我的用户表单如下所示及其输出...

如何将复选框选中属性设置为true

我想将复选框的默认属性设置为true

在 Checkbox.Checked 或 Unchecked 上执行命令

我的窗口上有一个复选框控件。我想执行一个命令来调用关联视图模型中的方法。我还需要复选框的值。我似乎找不到...

如果所有其他框都已选中，请选中 Google 表格中的一个框

我想在条件格式中使用公式，如果选中单元格 C4:C13 中的所有复选框，则将选中单元格 A3 中的复选框。 我会使用什么公式或者有什么不同...

带有多个复选框的过滤器在 React(Ts) 中不起作用

使用edamam API获取食谱。我正在尝试使用过滤器。它适用于单个过滤器，但如果我使用多个过滤器，则会出现错误。错误是： react_devtools_backend_compact.js:13851 获取错误

复选框角度

我正在使用 Angular，我不确定它是否有问题。 所以我有一个复选框，当我单击它时，它可以工作，但是当我需要选择另一个对象时 我需要点击它。看来是这样了（

Google 表格，当另一个单元格包含单词 yes 时自动勾选复选框

我试图让单元格 F10 中的复选框在单元格 F11 包含“是”一词时自动勾选 我尝试了很多在网上找到的解决方案，包括下面的两个和一些更复杂的解决方案，它

将复选框合并到代码行而不是单元格值中

我目前在A17中有一个复选框，我想替换M9值0/1的功能。 我如何有效地实施这一点？ ` 如果 Target.Address = "$M$9" 那么 如果 Target.Value > 0 T...

在 javaScript 中的条件 && 语句内迭代数组？

我有一个数组： 控制台.log（租户数组） (8) [“WeWork”、“雷格斯”、“空间”、“Knotel”、“RocketSpace”、“总部全球工作空间”、“其他&...

如何在Flutter中创建圆形CheckBox？或者改变CheckBox的样式，比如Flutter中选中的图片？

我想创建一个像这样的圆形复选框 我尝试过多种变体，但似乎都不起作用。包括我尝试使用 ClipRRect 。 因为代码比较多，所以我只选择...

为什么android的checkbox那么慢？

今天我用的是一台安卓机，性能很差。我发现复选框加载速度非常慢。 例如： 活动主文件 <

如何使用 python-docx 将复选框表单插入到 .docx 文件中？

我一直在使用Python来实现自定义解析器，并使用解析后的数据来格式化要在内部分发的Word文档。到目前为止，所有格式设置都非常简单明了...

引导程序将复选框放入下拉列表中

我正在尝试将复选框表单放入下拉列表中，如下所示： 下拉表格 我正在尝试将复选框表单放入下拉列表中，如下所示： <ul> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"> Dropdown Form<b class="caret"></b> </a> <ul class="dropdown-menu"> <li><label class="checkbox"><input type="checkbox">Two</label></li> <li><label class="checkbox"><input type="checkbox">Two</label></li> </ul> </li> </ul> 这是一个 Bootply 中的演示 但是，正如您在演示中所看到的，无论出于何种原因，实际的复选框本身出现在下拉菜单之外。谁能告诉我是什么原因造成的，以及应该如何实施？如果我把标签类拿出来，它可以工作，但它都挤在一起了。 这是我们要构建的： HTML 本质上，我们将结合两组不同的 Bootstrap 控件和样式：下拉菜单和复选框。在每个 li 内部，我们将使用 label 而不是 a 元素，这样我们就可以 将复选框包裹在标签中 并使整行可单击。 <ul class="dropdown-menu checkbox-menu allow-focus"> <li > <label> <input type="checkbox"> Cheese </label> </li> </ul> CSS 我们可以窃取一些通常应用于 .dropdown-menu li a 的样式，输入并将它们应用到我们的标签选项中。我们将使标签占据容器的整个宽度并修复一些标签/复选框对齐问题。 此外，我们将为 .active 和 :hover 添加样式。 .checkbox-menu li label { display: block; padding: 3px 10px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333; white-space: nowrap; margin:0; transition: background-color .4s ease; } .checkbox-menu li input { margin: 0px 5px; top: 2px; position: relative; } .checkbox-menu li.active label { background-color: #cbcbff; font-weight:bold; } .checkbox-menu li label:hover, .checkbox-menu li label:focus { background-color: #f5f5f5; } .checkbox-menu li.active label:hover, .checkbox-menu li.active label:focus { background-color: #b8b8ff; } JavaScript 其他一些内务处理，我们将在每个列表项上手动保留 .active 类标志，以对应于是否检查该项目，以便我们可以适当地设置其样式。 $(".checkbox-menu").on("change", "input[type='checkbox']", function() { $(this).closest("li").toggleClass("active", this.checked); }); 我们还希望通过允许菜单在内部点击事件上保持打开状态通过阻止事件冒泡来允许多种选择 $(document).on('click', '.allow-focus', function (e) { e.stopPropagation(); }); 堆栈片段中的演示 $(".checkbox-menu").on("change", "input[type='checkbox']", function() { $(this).closest("li").toggleClass("active", this.checked); }); $(document).on('click', '.allow-focus', function (e) { e.stopPropagation(); }); body { padding: 15px; } .checkbox-menu li label { display: block; padding: 3px 10px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333; white-space: nowrap; margin:0; transition: background-color .4s ease; } .checkbox-menu li input { margin: 0px 5px; top: 2px; position: relative; } .checkbox-menu li.active label { background-color: #cbcbff; font-weight:bold; } .checkbox-menu li label:hover, .checkbox-menu li label:focus { background-color: #f5f5f5; } .checkbox-menu li.active label:hover, .checkbox-menu li.active label:focus { background-color: #b8b8ff; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i class="glyphicon glyphicon-cog"></i> <span class="caret"></span> </button> <ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1"> <li > <label> <input type="checkbox"> Cheese </label> </li> <li > <label> <input type="checkbox"> Pepperoni </label> </li> <li > <label> <input type="checkbox"> Peppers </label> </li> </ul> </div> Bootstrap 在其文档中使用复选框的方式如下： <div class="checkbox"> <label> <input type="checkbox">Two </label> </div> 所以你的看起来像： <ul> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown Form<b class="caret"></b></a> <ul class="dropdown-menu"> <li> <div class="checkbox"> <label> <input type="checkbox">Two </label> </div> </li> <li> <div class="checkbox"> <label> <input type="checkbox">Two </label> </div> </li> </ul> </li> </ul> 文档： http://getbootstrap.com/css/#forms 我认为一个简单的解决方案是， <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="sampleDropdownMenu" data-toggle="dropdown"> Dropdown </button> <div class="dropdown-menu"> <button class="dropdown-item" type="button"> <input type="checkbox">Action </button> <button class="dropdown-item" type="button"> <input type="checkbox">Action </button> <button class="dropdown-item" type="button"> <input type="checkbox">Action </button> </div> </div> 这里的问题是您的复选框的样式（通过 Bootstrap）为： .checkbox input[type=checkbox]{ position: absolute; margin-left: -20px; } 这样做可能是为了避免在删除 .checkbox 上的 <label> 类时看到的“捆绑”问题，但在这种情况下，负值 margin-left 会导致问题。 解决此问题的一种方法是对标记和 CSS 进行最小调整，只需在 <label> 上添加一些填充即可解决此问题： label.checkbox{ padding-left:20px; } 这是一个更新的 Bootply，向您展示正在运行的代码。希望这可以帮助！如果您有任何疑问，请告诉我。 在 Bootstrap v5 中，您可以使用 autoClose (data-bs-auto-close) 选项来更改下拉行为：https://getbootstrap.com/docs/5.3/components/dropdowns/#auto-close-behavior 示例： <div class="btn-group"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"> Clickable outside </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> </ul> </div>

如何设置复选框的文字大小

有没有办法设置复选框文本的大小？ 我有以下代码： 复选框{ text: qsTr("使用延迟") 检查：假 锚点.horizontalCenter：parent.horizontalC...

为 blazor 创建三态复选框组件

<input @bind="Checked" type="checkbox" @onclick="eventArgs => { onclick(); }" indeterminate="@indeterminate" class="checkbox-input"> @code { [Parameter] public bool? selected { get; set; } = null; public bool indeterminate { get; set; } public bool Checked { get; set; } public void onclick() { selected = selected == null ? true : selected == true ? new bool?() : false; Checked = selected == null || selected == false; indeterminate = selected == null; } } 这不会产生预期的结果 复选框始终处于选中或未选中状态，永远不会不确定。 有什么想法吗？ 我在 .NET core 3.1+ 中实现了这个简单的组件。 这是一个小提琴。 CSS来自bootstrap，需要显示一个空框，一个选中的框和一个“满”框以指示状态0,1,-1（可以轻松更改这些值）： <style> [class^="icon-"], [class*=" icon-"] { display: inline-block; width: 14px; height: 14px; margin-top: 1px; *margin-right: .3em; line-height: 14px; vertical-align: text-top; background-image: url(/img/glyphicons-halflings.png); background-position: 14px 14px; background-repeat: no-repeat; } .bootstrap-checkbox { display: inline-block; position: relative; width: 13px; height: 13px; border: 1px solid #000; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .bootstrap-checkbox i { position: absolute; left: -2px; top: -3px; } .icon-stop { background-position: -312px -72px; } .icon-check { background-position: -288px 0px; } </style> 这是 blazor 组件： <div @ref=checkboxElement class="bootstrap-checkbox" @onclick="(e) => OnClick(e)"><i class="@ImgClass"></i></div>@Description @code { public ElementReference checkboxElement { get; set; } [Parameter] public string Description { get; set; } [Parameter] public bool? Checked { get; set; } public string ImgClass { get; set; } public int Value { get; set; } protected override void OnInitialized() { Value = Checked switch { null => -1, true => 1, false => 0 }; ImgClass = Value switch { -1 => "icon-stop", 1 => "icon-check", _ => "" }; } public void OnClick(MouseEventArgs e) { switch (ImgClass) { case "": ImgClass = "icon-check"; Value = 1; break; case "icon-check": ImgClass = "icon-stop"; Value = -1; break; case "icon-stop": ImgClass = ""; Value = 0; break; } } } 使用 JS 互操作 创建一个简单的脚本 <script> var auxiliarDOM = auxiliarDOM || {}; auxiliarDOM.setValue = function (element, property,value) { element[property] = value; } </script> 然后在 blazor 中你可以有一个 ElementRef @inject IJSRuntime JSRuntime <input @ref="checkRef" type="checkbox" /> private ElementReference checkRef; //this make the check indeterminate await JSRuntime.InvokeVoidAsync("auxiliarDOM.setValue", checkRef, "indeterminate", true); //this make the check no indeterminate await JSRuntime.InvokeVoidAsync("auxiliarDOM.setValue", checkRef, "indeterminate", false); 三态复选框组件，基于Eliseo的答案： 工作示例：Blazor fiddle JS设置indeterminate属性： <script type="text/javascript"> function setElementProperty(element, property, value) { element[property] = value; } </script> CheckBox.razor 文件： <input @ref=elementRef id="@elementId" type="checkbox" checked="@isChecked" @onchange="OnChange"/> <label for="@elementId">@ChildContent</label> CheckBox.razor.cs 文件： using Microsoft.AspNetCore.Components; using Microsoft.JSInterop; using System; using System.Threading.Tasks; public partial class CheckBox { [Inject] IJSRuntime jsRuntime { get; set; } = null!; [Parameter] public RenderFragment? ChildContent { get; set; } [Parameter] public bool? Checked { get; set; } [Parameter] public EventCallback<bool?> CheckedChanged { get; set; } private bool isChecked; private ElementReference elementRef; private string elementId = Guid.NewGuid().ToString(); private async Task OnChange(ChangeEventArgs e) { Checked = Checked switch { false => true, true => null, null => false, }; isChecked = Checked != false; bool indet = Checked == null; await jsRuntime.InvokeVoidAsync("setElementProperty", elementRef, "indeterminate", indet); await CheckedChanged.InvokeAsync(Checked); } } 由于这篇文章帮助我制作了自己的三态复选框，我想分享我的实现，作为一个剃刀文件： <input type="checkbox" @ref=@thisRef @bind=boundValue @bind:after=Change @attributes=AdditionalAttributes /> <script type="text/javascript"> function setElementProperty(element, property, value) { element[property] = value; } </script> @code { private bool boundValue = false; private int _value = 0; private ElementReference thisRef = new(); public int Value { get => _value; set { if (value < 0 || value > 2) throw new ArgumentOutOfRangeException("Value takes values of 0, 1 and 2, where 0 is false, 1 is true and 2 is indeterminate."); _value = value; if (IsIndeterminate()) SetIndeterminate(); else { if (_value == 1) boundValue = true; else boundValue = false; } } } public bool? ValueBool { get => Value switch { 0 => false, 1 => true, 2 => null, _ => throw new Exception() }; set { switch (value) { case null: Value = 2; break; case true: Value = 1; break; case false: Value = 0; break; } } } public bool Checked { get => Value == 1; set => Value = value ? 1 : 0; } public StateEnum State { get => (StateEnum)Value; set => Value = (int)value; } [Parameter(CaptureUnmatchedValues = true)] public IDictionary<string, object>? AdditionalAttributes { get; set; } public bool IsIndeterminate() => _value == 2; private async void SetIndeterminate() { _value = 2; await ijs.InvokeVoidAsync("setElementProperty", thisRef, "indeterminate", true); } private void Change() { if (boundValue) _value = 1; else _value = 0; } public enum StateEnum { Unchecked, Checked, Indeterminate } }```

Vue Table 组件在标题标题和复选框中添加“换行符”

标题是不言自明的，有什么方法可以在复选框和标题上的标题中添加换行符吗？ （也由于特定原因我无法添加js或自定义css） 我正在使用 primevue 文档...

直观地禁用复选框，但允许它仍然提交其值

我有一个从其他选择更新的复选框，但向用户显示选中状态很重要。但是我也希望它在功能上是只读的并这样表示......

WooCommerce 产品循环中的复选框，用于在 Ajax 添加到购物车上添加选项

在 WooCommerce 中，我在单个产品页面和产品循环中添加了一个复选框，用户可以在其中检查他们是否想要请求证书。 我下面的代码在单机上运行良好