checkbox 相关问题

React Checkbox 未发送 onChange

TLDR：使用defaultChecked而不是checked，工作jsbin。 尝试设置一个简单的复选框，在选中时会划掉其标签文本。由于某种原因，handleChange 没有得到满足...

xpath 在浏览器开发工具中工作，但 selenium 找不到元素

步骤：登录techfetch.com后，单击全选复选框，然后单击多个快速应用按钮。 然后：尝试选中“附加求职信”复选框。我能找到元素...

读取布尔值时，e.values 和 e.oldValues 的类型是什么？

e.values 的类型明显不同。我们知道布尔类型触发器的事件对象中返回的确切类型吗？

选择复选框并将项目发送到电子邮件

我在使用 VBA 发送电子邮件时遇到问题。因此，我在工作表中有复选框和项目，并且我想在选中复选框时将项目发送到电子邮件。如果未选择，则不执行任何操作。 我有...

如果选中一个复选框，请将另一个复选框设置为取消选中

我的表单上有两个复选框； chkBuried 和 chkAboveGround。我想将其设置为如果选中一个，则取消选中另一个。我怎样才能做到这一点？ 我尝试过 CheckChanged 属性： 私人...

有关 BlueJ 中按钮的几个问题

我的问题是，当我选择单选按钮时，它会在 java 终端中导致巨大的错误。它在开始按钮（按钮1到按钮4）按钮1启动加油站（所以你可以选择...

我的 django 复选框组未收到有效值，我该怎么办？

我是 django 新手，只是因为我正在做的一个学生项目而深入研究，这个复选框有一个问题，我不明白...... ... 我是 django 新手，只是因为我正在做的一个学生项目而深入研究，这个复选框有一个问题，我不明白...... <div class="form-group"> <label>4 - Deficiência do Participante: <span>*</span></label> <div class="checkbox-group"> {% for disability in form.participant_disability %} <div class="form-check"> {{ disability }} </div> {% endfor %} </div> </div> 我尝试搜索、删除、更改，但没有任何效果，这里是 forms.py、models.py 和views.py 模型.py from django.db import models from .choices import PARTICIPANT_DISABILITY_CHOICES class Disability(models.Model): name = models.CharField(max_length=255) def __str__(self): return self.name class ParticipantResponse(models.Model): PARTICIPANT_DISABILITY_CHOICES = [ ('auditiva', 'Deficiência Auditiva'), ('fisica', 'Deficiência Física'), ('intelectual', 'Deficiência Intelectual'), ('visual', 'Deficiência Visual'), ('autista', 'Transtorno Espectro Autista'), # Add more options as needed ] participant_disability = models.CharField(max_length=255, choices=PARTICIPANT_DISABILITY_CHOICES, default=['']) def __str__(self): return f"Response for {self.participant_name}" views.py from django.shortcuts import render, redirect from .forms import ParticipantResponseForm from .models import ParticipantResponse def form_view(request): if request.method == 'POST': form = ParticipantResponseForm(request.POST) if form.is_valid(): # Convert selected disability choices to integers form.cleaned_data['participant_disability'] = [int(choice) for choice in form.cleaned_data['participant_disability']] # Save the form data without committing to the database response = form.save(commit=False) # Assign the disability choices to the response object response.participant_disability.set(form.cleaned_data['participant_disability']) # Save the response object to the database response.save() return redirect('responses') else: print(form.errors) print(request.POST) else: form = ParticipantResponseForm() return render(request, 'form.html', {'form': form}) def show_responses(request): responses = ParticipantResponse.objects.all() print(responses) return render(request, 'responses.html', {'responses': responses}) 表格.py from django import forms from .choices import PARTICIPANT_DISABILITY_CHOICES from .models import ParticipantResponse, Disability class ParticipantResponseForm(forms.ModelForm): PARTICIPANT_DISABILITY_CHOICES = [(str(disability.id), disability.name) for disability in Disability.objects.all()] participant_disability = forms.MultipleChoiceField( choices=PARTICIPANT_DISABILITY_CHOICES, widget=forms.CheckboxSelectMultiple, required=True, label='4 - Deficiência do Participante' ) class Meta: model = ParticipantResponse exclude = [] fields = '__all__' widgets = { 'birth_date': forms.DateInput(attrs={'type': 'date', 'class': 'w3-input', 'id': 'id_birth_date'}), } def __init__(self, *args, **kwargs): super(ParticipantResponseForm, self).__init__(*args, **kwargs) self.fields['participant_disability'].choices = PARTICIPANT_DISABILITY_CHOICES 如果您能帮助我，我将不胜感激。 您的代码中存在多个问题。 首先，在forms.py您的ParticipantResponseForm初始化中，您动态设置participant_disability的选择： PARTICIPANT_DISABILITY_CHOICES = [(str(disability.id), disability.name) for disability in Disability.objects.all()] 这是正确的，但它依赖于数据库中已存在的 Disability 对象。如果“残疾”表中没有任何条目，您的选择将为空。 其次，您正在使用 MultipleChoiceField 和 CheckboxSelectMultiple 小部件。这是处理多个复选框的正确方法。但是，您的模型字段participant_disability是一个CharField，与用户选择的多个选项不一致。对于多项选择，ManyToManyField 会更合适，或者您需要将选项列表作为 CharField 中的单个字符串进行处理。 另一个是，在您的 form_view 函数中，尝试将残疾选项转换为整数，然后使用 response.participant_disability.set(...) 设置它们。这是不必要的，也不会起作用，因为 participant_disability 是 CharField。这段代码看起来就像 participant_disability 是 ManyToManyField。 我的主要建议是将 participant_disability 模型中的 ParticipantResponse 字段更改为引用 ManyToManyField 模型的 Disability，或者通过将所选选项连接/拆分为单个字符串来正确处理 CharField。

Android jetpack compose Material 3 无法对齐复选框文本

我正在使用Android Studio Electric Eel | 2022年1月1日。 我还很新。我正在 Android 中尝试 Compose with Material3 中的复选框。我无法对齐复选框旁边的文本。请...

为什么 Flutter 中复选框的 UI 没有变化？

我尝试在 flutter 中制作一个复选框一周。由于没有编写额外的代码，我制作了一个小部件“week”，当我运行代码时，我可以看到复选框，但是当我单击它们时...

Jquery 选择表中的所有复选框

我有一个脚本应该检查表中的所有复选框。它第一次检查它们，之后取消检查它们。然而，当我尝试重新检查它们时，什么也没有发生。 jquery： ...

Asp.Net Core，复选框返回 NULL 值

我的视图中有一个复选框可以获取有关“Hall”实体类的详细信息，并且我有一个与之相关的视图，但我的复选框始终向实体类返回 NULL 值。 我尝试了其他解决方案，但是......

如何设置嵌套在标签标记内的复选框的样式

我在设置复选框时通常使用以下内容： Lorem ipsum 我使用样式 label::before 的标准方法来模拟样式...

如果一个表为真，如何设置其他表的复选框为启用？

我有一个表正在使用ajax进行验证，返回的结果为true，我还设置了一个全局标志，如果该表的验证为true，则...

如何勾选一个字段上的所有复选框？使用JS

我有一个字段有5-6个复选框（将来会增加更多），该字段名称为email_notification，这是我在google上找到的代码，用于自动检查...

Android RecyclerView 复选框会自行检查

我有一个 RecyclerView，它有一个复选框和文本视图。数字 10,20,30,40... 直到 500 应显示在文本视图中。选中的复选框应在文本视图中添加与

使用复选框实现 Android Recycler View 时出现“空列表不包含索引 0 处的元素”错误

我正在实现一个回收器视图，其项目作为复选框。我的数据来自 ROOM 数据库，此回收器视图位于对话框片段内。 对话框片段： 覆盖 fun onCreateView(...

将 Angular 14 更新为 15：mat-pseudo-checkbox 不再可见

我必须将我的 Web 应用程序从 Angular 14 更新到 15，但我有一个奇怪的问题：我的 mat-pseudo-checkbox （下面的代码）不再可见。 我必须将我的 Web 应用程序从 Angular 14 更新到 15，但我有一个奇怪的问题：我的 mat-pseudo-checkbox（下面的代码）不再可见。 <div> <mat-pseudo-checkbox (click)="itemSelect()" [state]="isItemSelected()"></mat-pseudo-checkbox> Test </div> 在 Angular 14 中，“mat-pseudo-checkbox” 是可见的。如果我用“mat-checkbox”更改代码，则会出现复选框。我没有相对于 “mat-pseudo-checkbox” 的 CSS，并且无法找到有关 “mat-pseudo-checkbox” 从 14 移植到 15 的任何信息。 我该如何正确处理这个问题？ 新版本中应通过此导入伪复选框。 从“@angular/material/core”导入{MatPseudoCheckboxModule}；

改变React js中的复选框状态

这是我在反应中复选框的代码。它来自 Material-UI const [复选标记，setCheckMark] = useState(false); const [selectedRows, setSelectedRows] = useState([]); consttoggleAllCheck = ...

当用户想要“检查全部”时，如何在 React.js 中实现？

如何在此代码中实现“检查全部”功能？我尝试了几种方法，但都没有成功。 这是复选框的位置 ... 如何在此代码中实现“检查全部”功能？我尝试了多种方法，但都没有成功。 这是复选框的位置 <div style={{ marginTop: 33 }}> {Object.keys(permissionList).map((sectionKey, index) => ( <Collapsible title={permissionList[sectionKey][0]?.section} isFirst={index === 0} key={sectionKey} > {permissionList[sectionKey]?.map((item, index) => ( <Checkbox.Group options={[ { label: item.name.toLowerCase(), value: item.name.toLowerCase(), }, ]} disabled={isViewItem} className="checkbox-style" key={index} value={formData?.permissions .filter( per => per.section.toLowerCase() === item.section.toLowerCase() ) .flatMap(per => per.name.toLowerCase())} onChange={checkedValues => handleCheckboxChange( item.permissionId, item.section.toLowerCase(), checkedValues ) } /> ))} <Checkbox.Group options={[ { label: "check all", value: permissionList[sectionKey][0]?.section, }, ]} disabled={isViewItem} className="checkbox-style" key={index} // value={formData?.permissions // .filter( // per => // per.section.toLowerCase() === item.section.toLowerCase() // ) // .flatMap(per => per.name.toLowerCase())} onChange={checkedValues => handleCheckAll(permissionList[sectionKey], checkedValues) } /> </Collapsible> ))} </div> 这是复选框功能 const handleCheckboxChange = ( permissionId: number, section: string, checkedValues: CheckboxValueType[] ) => { console.log(permissionId, section, checkedValues); setFormData(prevFormData => { const updatedFormData = { ...prevFormData }; const permissionIndex = updatedFormData.permissions.findIndex( per => per.permissionId === permissionId && per.section.toLowerCase() === section.toLowerCase() ); if (checkedValues.length > 0) { if (permissionIndex !== -1) { updatedFormData.permissions = updatedFormData.permissions.map( (permission, index) => { if (index === permissionIndex) { return { ...permission, name: String(checkedValues[0]), }; } return permission; } ); } else { updatedFormData.permissions = [ ...updatedFormData.permissions, { permissionId, section, name: String(checkedValues[0]), }, ]; } } else { if (permissionIndex !== -1) { updatedFormData.permissions = updatedFormData.permissions.filter( (___, index) => index !== permissionIndex ); } } return updatedFormData; }); }; 这是handleCheckAll函数 const handleCheckAll = (permissionsData, value) => { console.log(permissionsData, value); }; 这是我存放物品的地方 const [formData, setFormData] = useState<RoleFormData>({ name: "", permissions: [], }); 其界面： interface Permission { name: string; section: string; permissionId: number; } interface RoleFormData { name: string; permissions: Permission[]; } 这就是我从选中所有框获取数据的方式 [{…}, {…}, {…}, {…}] 0: {permissionId: 1, name: '添加', 部分: '角色'}1: {permissionId: 2, name: '查看',部分：'角色'}2：{permissionId：3，名称：'编辑'，部分：'角色'}3：{permissionId：4，名称：'删除'，部分：'角色'} 截面--类型 [‘角色’] 权限列表如下所示 这是一个通用示例，说明我如何处理类似的事情（我不知道您正在使用哪个组件库，因此很难复制，并且我不会打扰复制粘贴权限您发布的图像 - 这就是我们要求代码作为文本而不是图像的原因。 这个想法是，您将有一个简单的处理函数，它接受一组权限 ID，并相应地影响状态。 （这也适用于您的 RoleFormData，只需进行一些小的、简单的更改。） 然后，另一个组件负责呈现单个部分的权限，并找出要传递给该处理函数的权限 ID 列表。 （检查/取消检查单个权限只需传递单个权限 ID 的列表即可。） 👉 在 这个 CodeSandbox 中观看直播。 interface Permission { name: string; section: string; permissionId: number; } const permissions: Permission[] = [ { permissionId: 1, name: "Add", section: "Role" }, { permissionId: 2, name: "View", section: "Role" }, { permissionId: 3, name: "Edit", section: "Role" }, { permissionId: 4, name: "Delete", section: "Role" }, { permissionId: 5, name: "Feed", section: "Kitten" }, { permissionId: 6, name: "Pet", section: "Kitten" } ]; function SectionDisplay({ allPermissions, section, updateSelections, selectedIds }: { allPermissions: Permission[]; section: string; updateSelections: (state: boolean, permissionIds: number[]) => void; selectedIds: Set<number>; }) { const permissions = allPermissions.filter((p) => p.section === section); const ids = permissions.map((p) => p.permissionId); return ( <div key={section}> <h1>{section}</h1> <button onClick={() => updateSelections(true, ids)}>Select All</button> <button onClick={() => updateSelections(false, ids)}>Select None</button> {permissions .filter((p) => p.section === section) .map((perm) => ( <div key={perm.permissionId}> <label> <input type="checkbox" checked={selectedIds.has(perm.permissionId)} onChange={(e) => updateSelections(e.target.checked, [perm.permissionId]) } /> {perm.name} </label> </div> ))} </div> ); } export default function App() { const sections = [...new Set(permissions.map((p) => p.section))]; const [selectedIds, setSelectedIds] = React.useState<Set<number>>( () => new Set() ); const selectedPermissions = permissions.filter((p) => selectedIds.has(p.permissionId) ); const updateSelections = (flag: boolean, ids: number[]) => { setSelectedIds((selectedIds) => { return new Set( flag ? [...selectedIds, ...ids] : [...selectedIds].filter((id) => !ids.includes(id)) ); }); }; return ( <div className="App"> {sections.map((section) => ( <SectionDisplay allPermissions={permissions} section={section} key={section} updateSelections={updateSelections} selectedIds={selectedIds} /> ))} <hr /> Selected permissions: <pre>{JSON.stringify(selectedPermissions, null, 2)}</pre> </div> ); }

当用户想要“检查全部”时，我如何在React.js中实现这一点？谁能帮我解决这个问题吗？

如何在此代码中实现“检查全部”功能？我尝试了几种方法，但都没有成功。有人可以帮助我吗？ 这是复选框的位置 如何在此代码中实现“检查全部”功能？我尝试了几种方法，但都没有成功。有人可以帮助我吗？ 这是复选框的位置 <div style={{ marginTop: 33 }}> {Object.keys(permissionList).map((sectionKey, index) => ( <Collapsible title={permissionList[sectionKey][0]?.section} isFirst={index === 0} key={sectionKey} > {permissionList[sectionKey]?.map((item, index) => ( <Checkbox.Group options={[ { label: item.name.toLowerCase(), value: item.name.toLowerCase(), }, ]} disabled={isViewItem} className="checkbox-style" key={index} value={formData?.permissions .filter( per => per.section.toLowerCase() === item.section.toLowerCase() ) .flatMap(per => per.name.toLowerCase())} onChange={checkedValues => handleCheckboxChange( item.permissionId, item.section.toLowerCase(), checkedValues ) } /> ))} <Checkbox.Group options={[ { label: "check all", value: permissionList[sectionKey][0]?.section, }, ]} disabled={isViewItem} className="checkbox-style" key={index} // value={formData?.permissions // .filter( // per => // per.section.toLowerCase() === item.section.toLowerCase() // ) // .flatMap(per => per.name.toLowerCase())} onChange={checkedValues => handleCheckAll(permissionList[sectionKey], checkedValues) } /> </Collapsible> ))} </div> 这是复选框功能 const handleCheckboxChange = ( permissionId: number, section: string, checkedValues: CheckboxValueType[] ) => { console.log(permissionId, section, checkedValues); setFormData(prevFormData => { const updatedFormData = { ...prevFormData }; const permissionIndex = updatedFormData.permissions.findIndex( per => per.permissionId === permissionId && per.section.toLowerCase() === section.toLowerCase() ); if (checkedValues.length > 0) { if (permissionIndex !== -1) { updatedFormData.permissions = updatedFormData.permissions.map( (permission, index) => { if (index === permissionIndex) { return { ...permission, name: String(checkedValues[0]), }; } return permission; } ); } else { updatedFormData.permissions = [ ...updatedFormData.permissions, { permissionId, section, name: String(checkedValues[0]), }, ]; } } else { if (permissionIndex !== -1) { updatedFormData.permissions = updatedFormData.permissions.filter( (___, index) => index !== permissionIndex ); } } return updatedFormData; }); }; 这是handleCheckAll函数 const handleCheckAll = (permissionsData, value) => { console.log(permissionsData, value); }; 这是我存放物品的地方 const [formData, setFormData] = useState<RoleFormData>({ name: "", permissions: [], }); 它的界面 interface Permission { name: string; section: string; permissionId: number; } interface RoleFormData { name: string; permissions: Permission[]; } 这就是我从选中所有框获取数据的方式 [{…}, {…}, {…}, {…}] 0: {permissionId: 1, name: '添加', 部分: '角色'}1: {permissionId: 2, name: '查看',部分：'角色'}2：{permissionId：3，名称：'编辑'，部分：'角色'}3：{permissionId：4，名称：'删除'，部分：'角色'} 截面--类型 [‘角色’] 权限列表如下所示 这是一个通用示例，说明我如何处理类似的事情（我不知道您正在使用哪个组件库，因此很难复制，并且我不会打扰复制粘贴权限您发布的图像 - 这就是我们要求代码作为文本而不是图像的原因。 这个想法是，您将有一个简单的处理函数，它接受一组权限 ID，并相应地影响状态。 （这也适用于您的 RoleFormData，只需进行一些小的、简单的更改。） 然后，另一个组件负责呈现单个部分的权限，并找出要传递给该处理函数的权限 ID 列表。 （检查/取消检查单个权限只需传递单个权限 ID 的列表即可。） 👉 在 这个 CodeSandbox 中观看直播。 interface Permission { name: string; section: string; permissionId: number; } const permissions: Permission[] = [ { permissionId: 1, name: "Add", section: "Role" }, { permissionId: 2, name: "View", section: "Role" }, { permissionId: 3, name: "Edit", section: "Role" }, { permissionId: 4, name: "Delete", section: "Role" }, { permissionId: 5, name: "Feed", section: "Kitten" }, { permissionId: 6, name: "Pet", section: "Kitten" } ]; function SectionDisplay({ allPermissions, section, updateSelections, selectedIds }: { allPermissions: Permission[]; section: string; updateSelections: (state: boolean, permissionIds: number[]) => void; selectedIds: Set<number>; }) { const permissions = allPermissions.filter((p) => p.section === section); const ids = permissions.map((p) => p.permissionId); return ( <div key={section}> <h1>{section}</h1> <button onClick={() => updateSelections(true, ids)}>Select All</button> <button onClick={() => updateSelections(false, ids)}>Select None</button> {permissions .filter((p) => p.section === section) .map((perm) => ( <div key={perm.permissionId}> <label> <input type="checkbox" checked={selectedIds.has(perm.permissionId)} onChange={(e) => updateSelections(e.target.checked, [perm.permissionId]) } /> {perm.name} </label> </div> ))} </div> ); } export default function App() { const sections = [...new Set(permissions.map((p) => p.section))]; const [selectedIds, setSelectedIds] = React.useState<Set<number>>( () => new Set() ); const selectedPermissions = permissions.filter((p) => selectedIds.has(p.permissionId) ); const updateSelections = (flag: boolean, ids: number[]) => { setSelectedIds((selectedIds) => { return new Set( flag ? [...selectedIds, ...ids] : [...selectedIds].filter((id) => !ids.includes(id)) ); }); }; return ( <div className="App"> {sections.map((section) => ( <SectionDisplay allPermissions={permissions} section={section} key={section} updateSelections={updateSelections} selectedIds={selectedIds} /> ))} <hr /> Selected permissions: <pre>{JSON.stringify(selectedPermissions, null, 2)}</pre> </div> ); }