首页 文章

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

提问于
浏览 次
2

对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' .

谢谢您的帮助 .

jquery html if-statement checkbox show-hide

3 回答

  • 0

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

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

    回复于
  • 0
    $("#de-options input[type='checkbox']").each(function() {
        var val = $(this).val();
        if($(this).is(':checked')) {
            $('#' + val).show();
        } else {
            $('#' + val).hide();
        }
    });
    回复于
  • 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" />

    Script

    $（函数（）{

    $("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/

    回复于

相关问题