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>下の右側が消えます。

このページには、両クリア div のインスタンスが約 10 個あります。

ユーザーがボックスをチェックしたときにリッスンするために、チェックボックスごとにクラスを設定する必要があると思いますが、チェックボックスの下の両クリア 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 のどのバージョンでもサポートされていません (ただし、バージョン 8 までの IE のみがリストされています)。

ただし、Quirksmode は、IE 9+: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以下の 1 つの div に対してのみ機能します。それらをすべて削除したいと言ったので、nextAll関数を確認する必要があります。

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

于 2012-06-22T19:20:09.700 に答える