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.
我正在交互式 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.