javascript - 如何选择/取消选择 oracle apex 表单中的所有复选框

Question

我在 Oracle Apex 中有一个页面区域，其中包含许多复选框（顶点形式）。我想要一个在每个复选框项目的标题处添加一个复选框的功能，它将选择/取消选择下面的所有复选框项目。

我是 Apex 开发的新手，需要帮助。

Answer 1

这是一个解决方案，假设复选框上方的文本来自项目的标签（不知何故我不认为是这种情况）。如果需要，当我了解更多信息时，我可以更新答案以更好地适应您的页面。

首先，进入要添加此“切换”功能的每个复选框。向下滚动到CSS Classes属性并将toggle-cb放在字段中。

接下来，进入页面级属性，将以下代码添加到函数和全局变量声明属性中：

function enableToggle() {
  var $wrapperDiv = $(this);
  var $label = $wrapperDiv.find('.t-Form-label');
  var $item = $wrapperDiv.find('.apex-item-checkbox');
  var buttonHtml = '<button type="button" class="t-Button t-Button--tiny t-Button--simple">Toggle all</button>';

  $label.html($label.text() + ' ' + buttonHtml);

  $label.find('button').on('click', function(event) {
    var $button = $(this);
    var $checkboxes = $item.find('input[type="checkbox"]');
    var checkedCount = $checkboxes.filter(function() {
      return this.checked === true;
    }).length;
    var check = checkedCount < $checkboxes.length;

    $checkboxes.each(function() {
      this.checked = check;
    });

    event.stopPropagation();
    $button.blur();
  });
}

最后，在页面的Execute when Page Loads属性中添加以下代码：

$('.toggle-cb').each(enableToggle);

这将为每个项目的标签添加一个按钮（假设复选框具有 toggle-cb 类）来执行切换：

请参阅以下内容以了解有关上述代码的更多信息： https ://www.youtube.com/watch?v=Pjur4Zkkwsk&list=PLUo-NIMouZ_sgdQpMbXXwhHKpwRggCY34&index=1