隐藏div是另一个div

我有一系列的<div class="clear-both"></div>后一系列divs。隐藏div是另一个div

我想要删除任何<div class="clear-both"></div>，显示该复选框出现的位置。

例如，

<input type="checkbox" value="male"> Male? 

<div class="clear-both"></div>

如果用户检查框，我想<div class="clear-both"></div>右下方它消失。

在页面上有大约十几个clear-both div实例。

我假设我必须为每个复选框设置一个类，以侦听用户何时检查该框，但我不确定如何删除复选框下方的clear-both div。

任何帮助表示赞赏，谢谢。

来源

2012-06-22 Brad

$('input[type=checkbox]').on('click', function() { 
    $(this).next('div.clear-both').hide(); 
}):

来源

2012-06-22 19:12:16 xandercoded

我想删除任何看起来复选框后，哪里显示。

您可以使用next()这样的：

$('input[type=checkbox]').click(function(){ 
    $(this).next('div.clear-both').remove(); 
});

这将删除点击取其点击复选框的下一个div元素。

更多：

http://api.jquery.com/next/

来源

2012-06-22 19:13:02 Blaster

虽然这是很容易做的，能与jQuery/JavaScript的，你也不要需要使用JavaScript; CSS可以用来代替（取决于您的跨浏览器的要求）：

.clear-both { 
    height: 1em; 
    background-color: #0f0; 
} 

input:checked + .clear-both { 
    background-color: #00f; 
}

JS Fiddle demo。

请注意，我使用变色只是因为我不确定您希望.clear-both显示/隐藏的状态。显然，根据您的需要调整风格。

为了进一步阐明这种方法在跨浏览器兼容性方面的局限性，根据Sitepoint，任何版本的Internet Explorer都不支持这种方法（尽管它们只列出了IE版本至8版本）。

但是Quirksmode clarifies that IE 9+ do/es支持:checked伪类。

来源

2012-06-22 19:19:16

使用next函数的两个建议仅适用于下面的一个div。你说你想删除所有的人，所以你应该看看nextAll功能：

http://api.jquery.com/nextAll/

来源

2012-06-22 19:20:09

如果你不想使用jQuery：

window.onload = function(){ 
    var elements = document.getElementsByTagName("input"); 
    for(var i=0;i<elements.length;i++) { 
    var element = elements[i]; 
    if(element.type == "checkbox") 
     element.onchange = function() { this.nextElementSibling.style.display = "none"; }; 
    } 
};

来源

2012-06-22 19:24:30

隐藏div是另一个div

回答

相关问题