javascript - 使用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")}" 

这样我就可以取消选中复选框并使相应的标签重新出现。但是，我遇到了一个新问题。带有值元素的复选框。如果我选中两个框，然后取消选中其中一个框，“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"
}

希望对您有所帮助。