如何选择/取消选择Oracle Apex形式的所有复选框

Question

我在Oracle Apex中有一个页面区域，其中包含许多复选框（apex表单）。 我希望有一种功能可以在每个复选框项的标题处添加一个复选框，以选择/取消选择其下方的所有复选框项。

我不熟悉Apex开发，因此需要帮助。

Answer 1

这是一个解决方案，它假定复选框上方的文本来自该项目的标签（某种程度上我不认为是这种情况）。如果需要，我可以在知道更多信息后更新答案，以更好地适合您的页面。

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

接下来，转到页面级属性，并将以下代码添加到 Function and Global Variable Declaration 属性：

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

最后，将以下代码添加到页面的页面加载时执行属性：

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

这将在每个项目的标签上添加一个按钮（前提是该复选框具有toggle-cb类），即可进行切换：

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