链接HTML复选框与元素隐藏未选中复选框时

将附加数据添加到HTML元素的好模式是什么？例如，我想将复选框链接到HTML，当复选框未选中时，我想隐藏它。像label元素的for属性一样，我想在标记中指定链接，以便我可以编写一个简单的通用脚本来遍历所有复选框并挂接jQuery事件处理程序来执行隐藏/显示。链接HTML复选框与元素隐藏未选中复选框时

例如，在此HTML：

<input type="checkbox" id="showFoo" /> 
<div id="foo"> 
    Some HTML here. Hide this when the checkbox is unchecked. 
</div>

什么是好的，让我的脚本知道#showFoo有关#foo？理想情况下，不会让我的HTML无法验证，也不需要我为ID使用特定的命名约定。额外的功劳，如果它使我的脚本更有效率。

来源

2012-01-24 Justin Grant

使用data-[key]属性来确定哪些#showFoo应控制

example jsfiddle

HTML：

<input type="checkbox" id="showFoo" data-toggles="foo" /> 
<div id="foo"> 
    Some HTML here. Hide this when the checkbox is unchecked. 
</div>

的jQuery：

$('#showFoo').change(function() { 
    $('#' + $(this).data('toggles')).toggle(); 
});

来源

2012-01-24 17:48:48 MikeM

的情况正是我一直在寻找。 @BNL给出了几乎相同的答案，但作为一个tierbreaker我会接受你的，因为代码示例也处理隐藏情况。 –

这似乎是数据元素的完美案例。

<input type="checkbox" id="showFoo" data-relateddiv="foo" />

在上checkboxs的事件处理程序

然后：

$('#' + $(this).data("relateddiv")).show();

来源

2012-01-24 17:46:05 BNL

-1

试试下面

if (checkboxIsChecked) { 
foo.visibility:visible; 
} else { 
foo.visibility:hidden; 
}

来源

2012-01-24 17:47:30

您可以使用 “相对” 属性

<input type="checkbox" id="showFoo" rel="foo" /> 

$('#showFoo').click(function(){ 
    var element_id = $(this).attr('rel'); 
    var element = $('#'+element_id); 
    if(element.is(':hidden')){ 
    element.slideDown(); 
    //element.show(); 
    } 
    else{ 
    element.slideUp(); 
    //element.hide(); 
    } 
});

来源

2012-01-24 17:49:27 d2burke

这是对rel属性的滥用。它有一个有效值的特定列表。 http://www.w3.org/TR/html4/types.html#type-links只需使用data- *属性即可。 – BNL

语义，尽管如此。 – d2burke

我用这个目前

element.each(function(i, e) { 
      var checked = $(e).prop('checked'), 
       foo = */Relationship betweeen element and foo*/; 
      foo .toggleClass('invisibleClass', checked) 
       .toggleClass('visibleClass', !checked); 
     });

的情况下，你HAV E倍数FOOS和元素（你必须首先定义它们之间的关系）

运行它，你的选择

来源

2012-01-24 17:57:21

什么是元素和foo * /'之间的关系？ – BNL

那么可以说，不同的复选框与不同的div有关，在这种情况下，foo = $（e）.next（'div'）;例如。 –

@Likwid_T - 我的问题的关键是如何定义HTML标记中的关系，以便在标记更改时不必更改代码。使用数据属性（见下面的答案）是一种更好的方法。 –

链接HTML复选框与元素隐藏未选中复选框时

回答

相关问题