2

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

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

当您点击提交按钮（有 5 个复选框）时，它应该显示选中的 div。所以我有一个链接到提交的 a 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”只是显示所有这些复选框，而不管我是什么已检查。

所以真的，我只需要知道“如果”该写什么。

谢谢您的帮助。

4

3 回答 3

0

不确定您的 HTML 看起来如何。假设它是这样的，这应该有效。

HTML 

<div id="de-options">
  <input type="checkbox" value="de-borders" /> Choose First
  <input type="checkbox" value="de-borders2" /> Choose Srcond
  <input type="checkbox" value="de-borders3" /> Choose Third
</div>

<div id="de-borders"> Div One</div>
<div id="de-borders2">Div Two</div>
<div id="de-borders3">Div Three</div>

<input type="submit" value="save" />

脚本

$(函数(){

    $("input[type='submit']").click(function(e){
      e.preventDefault();

     $("#de-options input[type='checkbox']").each(function() {
       var item= $(this);
       var val = item.attr('value');
       if (item.is(":checked"))
       {
         $('#' + val).show();
       }
       else
       {
          $('#' + val).hide();
       }
    });
  });

});

这是工作示例http://jsfiddle.net/hzpVy/15/

于 2012-04-26T17:34:55.113 回答
0

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

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

于 2012-04-26T17:27:58.143 回答
0 
   $("#de-options input[type='checkbox']").each(function() {
        var val = $(this).val();
        if($(this).is(':checked')) {
            $('#' + val).show();
        } else {
            $('#' + val).hide();
        }
    });
于 2012-04-26T17:19:45.773 回答