关于动态检查/取消选中复选框的帖子很多，但我想我的情况有点不同。我的复选框是mulitple values复选框（我用它来参数化图形），其中数据来自查询，例如：
select 'all' as val from dual
union
select name_of_month as val from months
结果是13个复选框：[0]（全部）[1] - [12]（jan feb mar等）
我想得到的是行为
我不确定上面的描述是否足够清楚，但我相信你觉得这个复选框应该如何工作
更新：我是Oracle DBA（具有JavaScript的基本知识），他试图在APEX中创建一些东西。直到我使用wizzards和鼠标绘制对象，这很容易。现在我看到我必须键入几行代码，所以请至少给我一些解释，在哪里键入它以及如何运行它以使其工作。
您可以使用jquery轻松完成此操作。我为你的项目制作了一个示例代码。希望它会有所帮助。
$( document ).ready(function() {
$('.all_chkbox').change(function(){
if($(this)[0].checked){
$('.chkbox').prop("checked", true);
}else{
$('.chkbox').prop("checked", false);
}
});
$('.chkbox').change(function(){
var flag = true;
$('.chkbox').each(function(){
if(!$(this)[0].checked){
flag = false;
return;
}
});
$('.all_chkbox').prop("checked", flag);
});
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Checkbox</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="checkbox_wrapper">
<input class="all_chkbox" type="checkbox">
<ul>
<li>checkbox 1 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 2 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 3 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 4 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 5 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 6 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 7 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 8 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 9 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 10 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 11 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 12 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 13 <input class="chkbox" type="checkbox" name="" ></li>
</ul>
</div>
</body>
</html>我在我的React项目场景中做到这一点有点不同但可能这会帮助你.....
所以这是我的复选框元素，您可以根据自己的需要进行复制：
<input type="checkbox" checked={this.isChecked(props.original.EmployeeId)} onChange={this.singleChange.bind(this, props.original.EmployeeId)}
isChecked = (empId) => {
let checkedItems = this.state.checkItems;
return checkedItems.indexOf(empId) > -1;
}
singleChange = (employeeId, event) => {
let checkedItems = this.state.checkItems;
if (event.target.checked) {
checkedItems.push(employeeId);
}
else {
if (checkedItems.includes(employeeId)) {
let index = checkedItems.indexOf(employeeId);
checkedItems.splice(index, 1);
}
}
checkedItems.length == this.props.employees.length ? this.setState({ allChecked: true }) : this.setState({ allChecked: false })
this.setState({ checkItems: checkedItems })
}
在这里，我正在维护一个包含那些我将要检查的员工的employeeId的数组，因此isChecked是一个检查员工是否被检查的功能，或者相对来说你可以说是否选中了复选框。在onChange事件时调用singleChange（）函数，该函数仅用于在分别检查或取消选中时从数组中插入和删除id。但是根据你的场景，第二行最后一行代码很重要，它会检查是否所有代码都被检查过。因此，如果您取消选中一个全部复选框将被取消选中，如果您将逐个检查所有复选框，则会自动选中（全部）复选框。对于（所有）一个复选框，您必须维护一个布尔变量。
<input type="checkbox" checked={this.state.allChecked} onChange={this.allChecked}></input>
allChecked = (event) => {
const allEmployeeIds = this.props.employees.map(employee => employee.EmployeeId);
if (event.target.checked) {
this.setState({ checkItems: allEmployeeIds });
this.setState({ allChecked: true })
}
else {
this.setState({ checkItems: [] });
this.setState({ allChecked: false });
}
}
上面的输入元素是我的全选复选框。它会在所有选中的布尔变量的基础上进行检查。这里在触发onChange事件时调用allChecked函数。如果选中此函数，则将所有id放在上面使用的相同数组中，如果未选中的数组将变为空。
不要对状态和其他属性感到困惑，因为我已经做了反应。这可能会帮到你。如果被困，请随意询问