Javascript 当复选框未选中时，将HTML复选框与要隐藏的元素链接

向HTML元素添加额外数据的好模式是什么？例如，我想将复选框链接到我想在复选框未选中时隐藏的HTML。与

label

元素的

属性类似，我想在标记中指定链接，这样我就可以编写一个简单的通用脚本来遍历所有复选框，并连接一个jquery事件处理程序来进行隐藏/显示

例如，在此HTML中：

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


这里有一些HTML。当复选框未选中时隐藏此选项。

让我的脚本知道
#showFoo
与
#foo
相关有什么好处？理想情况下，不会使我的HTML成为非验证或不需要我为ID使用特定的命名约定。额外的学分，如果它使我的脚本更有效
 对于数据元素来说，这似乎是一个完美的例子

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

试试下面

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

使用
数据-[key]
属性确定
#showFoo
应该控制的内容


HTML:

您可以使用“rel”属性

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


$（'#showFoo'）。单击（函数（）{
var元素_id=$（this.attr（'rel'）；
变量元素=$（“#”+元素id）；
if（element.is（':hidden'））{
元素。slideDown（）；
//元素show（）；
}
否则{
元素slideUp（）；
//元素。隐藏（）；
}
});
我目前正在使用这个

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

如果您有多个foo和元素（必须首先定义它们之间的关系）

在您选择的事件上运行它
这是对rel属性的滥用。它有一个有效值的特定列表。只需使用data-*属性。元素和foo*/

之间的关系是什么？假设不同的复选框与不同的div相关，在本例中，foo=$（e）。下一步（'div'）；例如，@Likwid\u T-我的问题是如何定义HTML标记中的关系，这样在标记更改时就不必更改代码。使用数据属性（见下面的答案）是一个更好的方法。这正是我想要的@BNL给出了几乎相同的答案，但作为一个tierbreaker，我会接受你的答案，因为代码示例也处理隐藏案例。

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

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

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