checkbox 相关问题

复选框是一个图形用户界面元素，允许用户进行二进制选择。

我有什么我有一个带有复选框的Ant Design 4表格： const example =（{initialValues，onsave}）=> { const [form] = form.useform（）; useeffect（（）=> { form.Resetfields（）; ...

javascript forms checkbox antd

回答 1 投票 0

Chakraui：如何以检查状态设置复选框颜色

export function CheckItem({ color, checked, label, onChange }: CheckItemProps) { return ( <Checkbox iconColor="white" borderColor={color} isChecked={checked} onChange={onChange} size="lg" > <Text fontSize="12px">{label}</Text> </Checkbox> ); } 检查时如何设置复选框的框颜色？使用bg设置包含文本的整个容器的背景。使用color设置文本的颜色。使用colorScheme不起作用，因为我使用的是十六进制值，而不是我主题的颜色。 borderColor在我选中框之前，我会按照未检查状态的期望，然后返回默认的蓝色填充。我尝试了所有其他用它的prop名称color，它们都没有用。我最终会期望某种东西看起来像这样：export function CheckItem({ color, checked, label, onChange }: CheckItemProps) { return ( <Checkbox _checked={{ // I don't know what prop to put here... }} iconColor="white" borderColor={color} isChecked={checked} onChange={onChange} size="lg" > <Text fontSize="12px">{label}</Text> </Checkbox> ); } 您可以通过在_checked中使用CSS选择器来为控件设置所需的样式来实现这一目标。 _checked={{ background: "red" }}不起作用的原因是因为检查复选框时将这些样式应用于container部分。因此，需要CSS选择器。 export function CheckItem({ color, checked, label, onChange }: CheckItemProps) { return ( <Checkbox _checked={{ "& .chakra-checkbox__control": { background: "red" } }} iconColor="white" borderColor={color} isChecked={checked} onChange={onChange} size="lg" > <Text fontSize="12px">{label}</Text> </Checkbox> ); } 您仍然需要更新边框颜色和伪状态（悬停，焦点等）样式，但您也应该能够在其中做到这一点。我认为唯一的解决方案是用自定义颜色扩展主题。从测试中，我唯一能获得您想要的结果的方法是组合iconColor和colorScheme <Checkbox size='lg' iconColor='black' colorScheme='orange' defaultChecked> 通过扩展您的theme或覆盖默认值，您可以创建自己的颜色，然后可以将其传递到ColorsCheme中。在使用Charka命令生成后，您只需要在此处添加自定义边框，它对我有效 Chakracheckbox.controlclassName ='Border-Third-500'> Full组件代码在这里： export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>( function Checkbox(props, ref) { const { icon, children, inputProps, rootRef, ...rest } = props; return ( <ChakraCheckbox.Root ref={rootRef} {...rest}> <ChakraCheckbox.HiddenInput ref={ref} {...inputProps} /> <ChakraCheckbox.Control className='border-red-500'> {icon || <ChakraCheckbox.Indicator />} </ChakraCheckbox.Control> {children != null && ( <ChakraCheckbox.Label>{children}</ChakraCheckbox.Label> )} </ChakraCheckbox.Root> ); } );

reactjs checkbox chakra-ui

回答 2 投票 0

与其标签相对于其标签的密码和复选框

我正在创建一个用于采用宠物和材料UI中的宠物的清单页面。在首页上，我面临着有关无线电按钮未对准的问题，并带有标签。

reactjs checkbox error-handling material-ui radio-button

回答 1 投票 0

icheck检查是否已选中复选框

javascript jquery checkbox icheck

回答 15 投票 0

hide/show textarea通过复选框，与不同的各节相同的类

javascript jquery checkbox

回答 3 投票 0

jaws屏幕读取器未显示我的MUI复选框的视觉焦点指示器

因此，我在jaws屏幕阅读器中遇到了这个问题。在浏览器中，这是完整的HTML 因此，我在jaws屏幕阅读器中遇到了这个问题。在浏览器中，这是完整的html <span class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-31 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary" aria-disabled="false"><span class="MuiIconButton-label"><input class="PrivateSwitchBase-input-34" tabindex="0" type="checkbox" data-indeterminate="false" aria-label="Add [email protected] [email protected] to selected items" value=""><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg></span><span class="MuiTouchRipple-root"></span></span> 在上面的代码中，这是我在组件中的代码 <Checkbox checked={isSelected} onChange={onSelect} inputProps={{ 'aria-label': checkboxAriaLabel || 'Select item', tabIndex: 0, }} onFocus={(e) => { e.target.style.outline = `2px solid ${ 'pink'}`; e.target.style.outlineOffset = '2px'; }} onClick={(e) => e.stopPropagation()} /> 我的问题是屏幕阅读器可以阅读ARIA标签，但焦点戒指指示器未显示这是正常行为。箭头键，当使用下巴时，请勿将系统焦点移动。他们要做的是允许用户在所谓的虚拟缓冲区中导航。一个网页表示为一种文本环境，用户可以通过字符，word，line，select，select，标记位置，按HTML元素（例如标题，按钮，表单字段等）进行移动。这称为虚拟光标模式。因此，在您的情况下，TAB可以按预期工作，并且箭头键不会。当我本人盲目时，我无法告诉您当您不使用屏幕阅读器并按下箭头键时，视觉上会发生什么。我相信在这种情况下，重点应该移动，但我不是100％确定的。另外，与您的问题没有真正的关系，但我不能保持沉默：您的aria-label是冗长的。它应该像John Doe, [email protected]。因为屏幕读取器说“复选框，（未检查）”，因为“添加到选择”含义是传达的。就是这样。查看如何完成Windows或Office设置。有一个复选框，上面写着“显示工具提示”，而不是“转动显示在上方的工具提示”之类的东西。这不是您的错，这是我们盲人社区正在宣讲的现代趋势之一。

checkbox material-ui accessibility jaws-screen-reader

回答 1 投票 0

为什么不能更改PYQT复选框的大小？

python checkbox pyqt

回答 1 投票 0

设置和读取访问复选框以使用VBA隐藏行

vba ms-access checkbox

回答 1 投票 0

checkbox databinding默认值null

Iam am databind将复选框与BindingSource一起，如果我不单击复选框，它将返回数据库中的空值。这是数据指标： checkgehuwd.databindings.add（“检查”，

c# .net winforms checkbox data-binding

回答 1 投票 0

在HTML5中检查和取消选中复选框的正确方法是什么？

html checkbox checked

回答 10 投票 0

有一种方法可以在P5J中样式复选框出现以成为切换开关？我正在尝试使用JavaScript在P5画布中更改复选框的外观，以具有与此类切换开关相同的外观我已经尝试在此草图中的CSS文件中进行实验，但是它

this

javascript css checkbox toggle p5.js

回答 1 投票 0

简单的复选框选择问题

python checkbox ag-grid streamlit

回答 0 投票 0

如何检查是否检查复选框，然后在柏树中执行一些操作？我的问题是，此代码没有进入IF（）分支，而是继续执行其他分支。

我的问题是，此代码没有进入if()分支，而是继续执行else分支。 <div class="ag-react-container"> <div class="text-center"> <input type="checkbox" class="" checked=""> </div> </div> cy.("#checkbox").then(($ele) => { if($el.next().is(':checked')){ cy.("#checkbox").next().should("be.checked"); } else { cy.("#checkbox").next().find("input").check(); cy.("#checkbox").next().find("input").should("be.checked"); } }); 问题似乎是.next()。如果将其删除，则测试可以正常运行。同样，命令对执行多个步骤也很有用。 cy.wrap() 你也可以这样做 $el 我可以在您的HTML中看到您拥有的检查复选框。因此，要验证检查复选框，您必须将其放置在该元素检查属性的IF条件下。 cy.get('.ag-react-container') .find('input') .then($el => { if ($el.is(':checked')) { cy.wrap($el).should("be.checked") // passes if checked } else { cy.wrap($el).click() cy.wrap($el).should("be.checked") // passes if not checked } })

input checkbox automated-tests cypress

回答 1 投票 0

在选中复选框的列中切换所有 td 的类

我正在寻找解决方案，我的表格在每个选定列的顶部都有复选框。我想通过单击一个复选框来单击“选中”列中的所有TD。到目前为止小提琴： $(':

jquery checkbox toggle

回答 1 投票 0

未选中复选框时如何禁用按钮

我正在尝试禁用该按钮，但 Typescript 代码不起作用！当我选择第一个和第二个复选框，但取消选择第一个复选框时，该按钮会自动禁用。示例

html typescript checkbox

回答 1 投票 0

Angular ng-change 不适用于复选框

下面是我的代码。通过单击“全选”按钮更改单个复选框时，不会触发单个复选框的 ng-change，但在单独选择时会触发它。 ...