Question

有很多关于动态检查/取消选中复选框的帖子，但我想我有些不同。我的复选框是多值复选框（我用它来对图形进行参数化），其中数据来自查询之类的东西：

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

结果是13个复选框：[0]（全部）[1]-[12]（3月2月3日等）

我想得到的是以下行为

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

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

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

Answer 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>

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

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

不要混淆状态和其他属性，因为我已经在react中完成了此操作。这可能会帮助您。随时询问是否卡住

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

2 个答案: