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

标签 javascript html oracle-apex

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

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

结果是 13 个复选框:[0](全部)[1]-[12](jan feb mar 等)

我想要得到的是以下行为

  • 当我选中(全部)时,所有 13 个复选框都会选中
  • 当我取消选中(全部)时,所有 13 个复选框都将取消选中
  • 当我取消选中 1-12 个复选框之一并且(全部)选中时,将取消选中
  • 当所有 12 个复选框都被一一选中时,复选框也会被选中

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

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

最佳答案

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

关于javascript - 动态选中/取消选中复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55723596/

相关文章:

Oracle Apex 5 LDAP 搜索不适用于全局目录

oracle - 使用 Apex 5.0 安装 ORDS

html - 具有全屏标题、限制宽度内容、 flexbox Logo 元素和粘性页脚的 HTML 页面

php - 当日期选择器的值发生变化时调用函数

javascript - YouTube 播放器 iframe 的非动态插入不会触发事件

javascript - 根据窗口高度 Bootstrap 模态高度

sql - Oracle中的日期格式(0)转换

javascript - CSS 高度依赖于其他 div 高度

javascript - 删除连线后两个 Node 保持链接

javascript - JQuery - 为 <div> 内的每个 <div> 提供一个 ID(数组?)