1

我有一系列<div class="clear-both"></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。

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

4

5 回答 5

2 
$('input[type=checkbox]').on('click', function() {
    $(this).next('div.clear-both').hide();
}):
于 2012-06-22T19:12:16.673 回答
1

我想删除该复选框出现后显示的任何内容。

你可以next()这样使用：

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

这将删除div单击复选框的下一个元素，无论哪个被单击。

更多的：

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

于 2012-06-22T19:13:02.663 回答
1

虽然使用 jQuery/JavaScript 很容易做到这一点，但您也不需要使用 JavaScript；可以改用 CSS（取决于您的跨浏览器要求）：

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

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

JS 小提琴演示。

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

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

然而Quirksmode 澄清 IE 9+ do/es 支持:checked伪类。

于 2012-06-22T19:19:16.743 回答
1

如果你不想使用 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-22T19:24:30.610 回答
0

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

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

于 2012-06-22T19:20:09.700 回答