使用 javascript 使表单元素消失

Question

我对 javascript 有点陌生。我有一堆用于 html 表单的复选框。复选框是从 python 脚本动态生成的。我拥有的最后一个复选框名为“N/A”，我想这样做，以便如果选中任何其他复选框，“N/A”复选框会自动消失。如果选中 N/A 复选框，其他复选框将消失。当然，如果我取消选中这些框，则会发生相反的情况。我知道我需要为不同的输入字段分配不同的 id，以便 javascript 可以识别它们，但我不确定如何编写 javascript 以使实际消失动作发生。 谢谢。

编辑;;一些动态python代码：

print "<blockquote><strong>Labels:</strong><br/>"
for elem in output_list:
    if elem not in non_delete_list:
        print "<input type=\"checkbox\" name=\"remove_cd\" value=\"" + elem + "\" />" + elem + "<br/>"
print "<input type=\"checkbox\" name=\"remove_cd\" value=\"r_on\" />N/A:"
print_reason_list()
print "<font color=\"#cc0000\">Reason Required</font><hr/>"

所以基本上，任何带有 value=elem 部分的东西都是动态的，最后的复选框是 N/A (value="r_on")。

编辑 2：

因此，感谢@Ankit（使用 document....style.display= "none"），我能够让这些框消失。我遇到的问题是，一旦选中一个框，相应的 id 就会永久隐藏。为了解决这个问题，我做了一个隐藏和取消隐藏功能，我的 onclick 看起来像：

"onclick=if(this.checked){hide("NA")}else{unhide("NA")}" 

这使我可以取消选中这些框并导致相应的标签重新出现。但是，我遇到了一个新问题。使用 value elem 的复选框。如果我选中两个框，然后取消选中其中一个框，“NA”会再次出现。只要选中了一个“elem”框，我就希望它保持隐藏状态。基本上，我需要重新扫描所有复选框以查看它们的当前状态（我认为）。我该怎么做？

Answer 1

您可以通过 javascript 启用/禁用 html 元素：

document.getElementById('<the id of your checkbox here>').disabled = true;

对于您的情况，只需在动态复选框周围放置一个 div 标签，然后根据您的需要添加/删除该 div。

例子：-

print "<blockquote><strong>Labels:</strong><br/>"

for elem in output_list:
    if elem not in non_delete_list:
        print "<div id=\"listBox\" >"
        print "<input type=\"checkbox\" name=\"remove_cd\" value=\"" + elem + "\" onclick=\"if(this.checked){myFunction("upperChkBoxes")}\" />" + elem + "<br/>"
        print "</div>"
print "<input type=\"checkbox\" name=\"remove_cd\" value=\"r_on\"  onclick=\"if(this.checked){myFunction("NA")}\"  />N/A:"
print_reason_list()
print "<font color=\"#cc0000\">Reason Required</font><hr/>"


function myFunction(par){
// put your logic of add/remove here based on par value as "upperChkBoxes" or "NA"
}

希望对您有所帮助。

Answer 2

您可以使用 css 属性 display none 显示或隐藏 html 元素

让它消失

document.getElementById('<the id of your checkbox here>').style.display = "none";

或显示回来

document.getElementById('<the id of your checkbox here>').style.display = "block";

如果您使用的是 jquery，您可以轻松地使用它来完成相同的操作

$('#id of the checkbox').hide() or $('#id of the checkbox').show()