Javascript 动态选中/取消选中复选框

有很多关于动态选中/取消选中复选框的帖子，但我想我的有点不同。 我的复选框是多值复选框（我使用它来参数化图形），其中数据来自查询，例如：

因此，结果是13个复选框：[0]（全部）[1]-[12]（一月-二月-三月等）

我想得到的是下面的行为

• 当我选中（全部）时，所有13个复选框都将选中
• 当我取消选中（全部）时，所有13个复选框都将取消选中
• 当我取消选中1-12个复选框中的一个且（全部）已选中时，将取消选中
• 当所有12个复选框逐个选中时，复选框也将被选中

我不确定上面的描述是否足够清楚，但我相信您会觉得这个复选框应该如何工作

更新：

---

我是Oracle DBA（具有JavaScript的基本知识），试图在APEX中创建一些东西。在我使用Wizzard和鼠标绘制对象之前，这很容易。现在我看到我必须输入几行代码，所以请至少给我一些解释，在哪里输入它，以及如何运行它，让它工作

您可以使用jquery轻松做到这一点。我为您的项目制作了一个示例代码。希望这会有帮助

$（文档）.ready（函数（）{
$（'.all_chkbox'）.change（函数（）{
如果（$（此）[0]。已选中）{
$（'.chkbox'）.prop（“选中”，为真）；
}否则{
$（'.chkbox'）.prop（“选中”，false）；
}
});
$（'.chkbox'）.change（函数（）{
var标志=真；
$（'.chkbox'）。每个（函数（）{
如果（！$（此）[0]。已选中）{
flag=false；
返回；
}
});
$（'.all_chkbox'）.prop（“选中”，标志）；
});
});

复选框

复选框1
复选框2
复选框3
复选框4
复选框5
复选框6
复选框7
复选框8
复选框9
复选框10
复选框11
复选框12
复选框13

您可以使用jquery轻松地完成此操作。我为您的项目制作了一个示例代码。希望这会有帮助


$（文档）.ready（函数（）{
$（'.all_chkbox'）.change（函数（）{
如果（$（此）[0]。已选中）{
$（'.chkbox'）.prop（“选中”，为真）；
}否则{
$（'.chkbox'）.prop（“选中”，false）；
}
});
$（'.chkbox'）.change（函数（）{
var标志=真；
$（'.chkbox'）。每个（函数（）{
如果（！$（此）[0]。已选中）{
flag=false；
返回；
}
});
$（'.all_chkbox'）.prop（“选中”，标志）；
});
});

复选框

复选框1
复选框2
复选框3
复选框4
复选框5
复选框6
复选框7
复选框8
复选框9
复选框10
复选框11
复选框12
复选框13

我在我的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 })    
        }

{
让checkedItems=this.state.checkItems；
返回checkedItems.indexOf（empId）>-1；
}
singleChange=（员工ID，事件）=>{
让checkedItems=this.state.checkItems；
if（event.target.checked）{
checkedItems.push（employeeId）；
}
否则{
if（检查编辑项包括（员工ID））{
让index=checkedItems.indexOf（employeeId）；
检查接头（索引1）；
}
}
checkedItems.length==this.props.employees.length？this.setState（{allChecked:true}）：this.setState（{allChecked:false}）
this.setState（{checkItems:checkedItems}）
}

在这里，我维护一个数组，其中包含我将要检查的员工的employeeId，因此isChecked是一个函数，它检查员工是否被选中，或者相对而言，您可以说复选框是否被选中。
singleChange（）函数在onChange事件发生时调用，该事件仅在分别选中或未选中时用于从数组中插入和删除id。
但是根据您的场景，最后一行代码的第二行很重要，它检查是否所有代码都已检查。因此，如果uou取消选中一个所有复选框，则将取消选中该复选框；如果您逐个选中所有复选框，则（全部）复选框将自动选中。对于（所有）一个复选框，您必须维护一个布尔变量

<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 });
        }
    }


allChecked=（事件）=>{
const allemployeeid=this.props.employees.map（employee=>employee.EmployeeId）；
if（event.target.checked）{
this.setState（{checkItems:allEmployeeIds}）；
this.setState（{allChecked:true}）
}
否则{
this.setState（{checkItems:[]}）；
this.setState（{allChecked:false}）；
}
}

上面的输入元素是我的全选复选框。它根据布尔变量all checked进行检查。在这里，当触发onChange事件时调用allChecked函数。如果选中，此函数将把所有id放在上面使用的相同数组中，如果未选中，数组将变为空

不要与状态和其他属性混淆，因为我在react中已经这样做了。这可能会对你有所帮助。如果口吃，请随时询问
<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 });
        }
    }