Question

通过HTML / CSS的任何类型的编码都是新的。我试着四处寻找，但我不确定如何将解决方案应用于我的具体问题。我有一个复选框列表：

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

当你点击提交按钮（有5个复选框）时，它应该显示已检查的div的div。所以我有一个链接到提交的href的函数。我遇到的问题是，如果用户UNCHECKS一个框，并再次点击提交，我需要这些框消失。

这就是我所拥有的（我得到了帮助所以我完全没有得到它）：

  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();
        }
      });
  });

我在哪里'if'是问题所在。因为.each我不知道如何指定'看看这些复选框以及它们是否被检查......'因为我现在拥有的'$ de-options'只是显示所有这些而不管我是什么已检查过。

所以我真的需要知道如何为'if。'

感谢您的帮助。

Answer 1

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

Answer 2

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

相反，将if / else的内容替换为： $（元件）.show（）;和$（元素）.hide（）;

Answer 3

不确定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/

使用if / else显示/隐藏包含复选框的div

3 个答案: