Как я могу изменить содержимое div с помощью флажков

Question

Я пытаюсь изменить флажок для содержимого div, но если содержимое не находится вместе (в том же div), то это не сработает.

HTML:

<div> 
    <input type="checkbox" id="check"> 
    <label for="check">Hello</label> 
</div> 

<div class="check"></div> 

CSS:

.check:before { 
    display: block; 
    width: 100px; 
    height: 100px; 
    background: red; 
    content:''; 
} 

input:checked ~ .check:before { 
    content:'Content'; 
} 

JSFiddle: https://jsfiddle.net/pgkwn4j6/

Answer 1

В вашем примере один Thats рабочих используется "вход: проверено ~ .Проверить: перед тем", который выбирает " проверьте "класс div, который предшествует сразу после проверяемого ввода (элементы-братья).

Когда вы помещаете ярлык и ввод в другом теге div, вам нужно выбрать родную сестру, которая невозможна через css.

Вы можете сделать это через JQuery.

CSS: how to select parent's sibling

выше вопрос демонстрирует очень похожую проблему вы имеете.

Answer 2

Это не работает, потому что он не находится в одном и том же div, в css вы не можете манипулировать каким-либо элементом вне родительского элемента. Чтобы иметь возможность управлять элементом снаружи, вы должны использовать jquery. Вот ваш JSfiddle правильно ссылка:

JSFiddle Correct

$(document).ready(function(e) { 
    $('input#check').click(function(){ 
    $('.check').toggleClass('show-content'); 
    }); 
});