0

divを非表示/表示するチェックボックスがあります。チェックボックスをdivの真上に置くと機能します。チェックボックスをページの別の場所に配置すると（使いやすくするために）、機能しません。特定の div をターゲットにして、ページのどこからでもチェックボックスを機能させる方法はありますか?

HTMLコードは次のとおりです。

<input type="checkbox" id="toggle-result" checked="checked">  </input>

CSS:

input[type=checkbox]:checked ~ div {
   display: none;
}
4

3 に答える 3

4

CSSを使用すると、子要素と隣接する要素を選択できるためdiv、チェックボックスの直後に配置されている場合は機能しますが、div別の場所（チェックボックスの上）にある場合に機能させたい場合は、使用する必要がありますJavaScript の後であれば、+隣接する要素またはネストされた隣接する要素を選択するために使用できます

デモ

<input type="checkbox" />
<div>Toggle Using CSS</div>

input[type=checkbox]:checked + div {
    display: block;
}

div {
    display: none;
}

divこのようにどこか遠くをターゲットにします（ただし、の前ではありませんcheckbox）

デモ 2

input[type=checkbox]:checked + a + .blah .target {
    display: block;
}

.target {
    display: none;
}

<input type="checkbox" />
<a href="#">Dummy Link</a>

<div class="blah">
    <div class="target">Complicated Selector, Isn't It?</div>
</div>

説明 :input[type=checkbox]:checked + a + .blah .targetここで、チェックされた状態のチェックボックスを選択し、アンカー タグである隣接要素を選択してこれを連鎖させ、クラスを持つa タグに隣接する別の隣接要素を選択し、クラスでネストされた子要素を選択するよりもdiv.blah.target

jQuery To Do の使用 (ターゲット要素がどこにあるかは関係ありません)デモ 3

<input type="checkbox" id="checkme" />
<a href="#">Dummy Link</a>
<div id="show_on_check" style="display:none">
    This content should appear when the checkbox is checked
</div>

$(document).ready(function() {
    $('#checkme').change(function() {
        $('#show_on_check').toggle();
    });
});
于 2013-05-22T14:19:19.457 に答える
0

セレクターで要素 ID を使用します。

<input type="checkbox" id="toggle-result" checked="checked"/>

<div id="myDiv">showme</div>

<style>
    #toggle-result:checked ~ #myDiv {
        display: none;
    }
</style>
于 2013-05-22T14:24:34.983 に答える
0 
input[type=checkbox]:checked ~ div {
   display: none;
}

チェックされている a が前にあるすべてのdiv要素を選択します。inputおそらく壊れる理由は、入力が前にないためdivです（質問で述べたように）

于 2013-05-22T14:20:01.613 に答える