jquery - 使用 if/else 显示/隐藏带复选框的 div

Question

对于 HTML/CSS 之外的任何类型的编码都是全新的。我试着环顾四周，但我不确定如何将解决方案应用于我的特定问题。我有一个复选框列表:

<input type="checkbox" value="de-borders" /> Choose my border

当您点击提交按钮(有 5 个复选框)时，它应该会显示选中的 div。所以我有一个链接到提交的 href 的函数。我遇到的问题是，如果用户取消选中一个框，然后再次点击提交，我需要这些框消失。

这就是我所拥有的(我得到了帮助，所以我没有完全理解):

  var show_panels =(function(){
    $("#de-options input").each(function(index, element) {
        var val = $(element).attr('value');
        if ($("#de-options input").is(":checked"))
        {
            $('#' + val).show();
        }
        else
        {
             $('#' + val).hide();
        }
      });
  });

问题出在我有“如果”的地方。由于 .each，我不知道如何指定“查看这些复选框，如果它们被选中……”，因为我现在拥有的“$de-options”只显示所有这些复选框，而不管我做什么检查过。

所以我真的只需要知道为“如果”填什么。

感谢您的帮助。

Answer 1

您正在构建一个名为“val”的变量，该变量设置为“$(element).attr('value');”。在您的示例中，复选框的值为“de-borders”，因此在本例中，val="de-borders"...到目前为止还不错。但是，一旦进入您的 if 语句，它就会尝试隐藏 $('#' + val) 或 $('#de-borders')。意思是隐藏页面上不存在的ID为de-borders的元素。

相反，将 if/else 的内容替换为: $(元素).show();和 $(element).hide();