JavaScript 控制交互式 PDF 文件中的复选框选择

JavaScript to control checkbox selection in interactive PDF files

我正在交互式 PDF 中创建一系列复选框,并且我添加了 Javascript 操作以在选中一个选项后清除所有其他选项。单击复选框 1 后,将清除复选框 2 到 4。

我知道这本质上是一个单选按钮,但出于 PDF 的目的,用户需要能够取消选择一个选项并能够在不添加 'clear all' 按钮的情况下清除所有选项.

我要添加的 Javascript 是: this.resetForm(["姓名", "姓名1", "姓名2", "姓名3", "姓名4"]);

我想知道是否可以添加额外的代码,让表单忽略自身的重置操作?

有了这个,我可以一次将 Javascript 应用于所有复选框,而不是进入并向每个单独的复选框添加 Javascript 重置表单。

抱歉,如果这个问题真的很简单,我 Javascript 经验不多。

提前致谢, 马蒂

要取消选中单个复选框,

  • document.getElementById("checkboxId").checked = false; (JS)

  • $('#checkboxId').prop('checked', false); (JQuery 1.6+)

看起来它应该像单选按钮一样工作。所以你可以将选中的复选框的id传递给方法,只检查它。

function invokeClear(item){
   var inputList = document.getElementsByTagName('input');
   
   for (var i = 0; i < inputList.length; i++) {
       if (inputList[i].type == 'checkbox' && inputList[i].id != item ) {
           inputList[i].checked = false;
       }
   }
}
<html>
  <body>
    <input type="checkbox" id="cb1" class="cb-element" onclick="invokeClear(this.id)"/> Checkbox  1<br>
    <input type="checkbox" id="cb2" class="cb-element" onclick="invokeClear(this.id)"/> Checkbox  2<br>
    <input type="checkbox" id="cb3" class="cb-element" onclick="invokeClear(this.id)"/> Checkbox  3
  </body>
</html>

您不需要使用复选框来实现您想要的行为。您实际上可以创建在单击所选项目时关闭的单选按钮。像往常一样创建单选按钮,然后将以下脚本添加到 Mouse Up 操作中...

if (previousValue == event.target.value) {
    this.resetForm(event.target.name);
}

以及鼠标按下操作的以下代码...

var previousValue = event.target.value;

你可以看到一个工作示例here.