动态检查/取消选中复选框答案

【问题标题】：dynamic check/uncheck of checkboxes动态检查/取消选中复选框
【发布时间】：2019-04-17 17:26:58
【问题描述】：

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

select 'all' as val from dual
union
select name_of_month as val from months

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

我想得到的是低于行为

当我选中（全部）时，所有 13 个复选框都会选中
当我取消选中（全部）所有 13 个复选框时，将取消选中
当我取消选中 1-12 个复选框之一并且（全部）被选中时，将取消选中
当所有12个复选框都被一一选中时，复选框也会被选中

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

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

【问题讨论】：

您在项目中使用 jQuery 吗？或者你只是想用 vanilla JavaScript 来实现这个？
我不知道您是如何创建这些复选框的，但如果它们是项目。使用 Jakir 解决方案，您需要使用该 javascript 在页面加载时创建动态操作。然后，转到您的“全部”复选框并在自定义属性字段中放 >>> class="all_chkbox" >> class="chkbox" apex.oracle.com/pls/apex/f?p=145797:1

标签： javascript html oracle-apex

【解决方案1】：

您可以使用 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>

【讨论】：

【解决方案2】：

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

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

不要对 state 和其他属性感到困惑，因为我在 react 中已经这样做了。这可能会帮助你。如果卡住了，请随时询问

【讨论】：