チェックボックスをクリックすると、このタグを作る方法<h3>？今は隠されています。チェックボックスをクリックしたときにタグを表示させる方法
<h3 class="bark">Bark Bark</h3>
<input type="checkbox" class="title">Hear a dog</input>
CSS：jQueryのを使用して
.bark{
visibility: hidden
}
input[type="checkbox"]:checked {
visibility: visible
}
HTML
<h3 class="bark" id="bark" onclick="showtag()">Bark Bark</h3>
<input type="checkbox" class="title">Hear a dog</input>
JAVASCRIPT
<script language="javascript">
function showtag() {
var showme = document.getelementbyid("bark");
showme.style.visibility = "visible";
}
</script>
<h3 class="bark"><a href="#" id="id1">Bark Bark</a></h3>
<input type="checkbox" class="title">Hear a dog</input>
<script>$('#id1').click(function() {
if($(".title").is(':checked')){
$('.title').css('visibility','visible');
}else{
$('.title').css('visibility','hidden');
}
});</script>
任意のjqueryの分のJSが含まれており、このコードを試してください：あなたはinput後h3を置くべき
.bark{
visibility: hidden;
}
input[type="checkbox"]:checked + .bark {
visibility: visible;
}<input type="checkbox" class="title">Hear a dog</input>
<h3 class="bark">Bark Bark</h3>：1つのトリックがあるスクリプト言語を使用しない
これはどのように動作するはずですか？ h3をクリックすると、実際にチェックボックスが非表示になります。 –
.bark{
visibility: hidden
}
input[type="checkbox"]:checked + h3.bark {
visibility: visible
}<input type="checkbox" class="title">Hear a dog</input>
<h3 class="bark">Bark Bark</h3>これは、OPが問題にしていたのと同じエラー、つまり、マークアップの中の漂白の「」を繰り返します。 –
function checkInput(cbox) {
if (cbox.checked) {
document.getElementById('check_box').style.visibility='visible';
}
else{
document.getElementById('check_box').style.visibility='hidden';
}
}#check_box{
visibility: hidden;
}<h3 id="check_box">Bark Bark</h3>
<input type="checkbox" class="title" onclick="checkInput(this);">Hear a dog他の回答が言うように、あなたは、H3の上にチェックボックスを配置する必要があります。
しかし、実際にテキスト「Hear a dog」をh3の下に表示するには、HTMLとCSSの両方を少し変更する必要があります。
#checkbark {
display: none
}
.bark {
visibility: hidden
}
#checkbark:checked + .bark {
visibility: visible
}
label[for='checkbark'] {
cursor: pointer;
}
label[for='checkbark']::before {
content: '\2610 ';
}
#checkbark:checked ~ label[for='checkbark']::before {
content: '\2611 ';
}<input type="checkbox" class="title" id="checkbark">
<h3 class="bark">Bark Bark</h3>
<label for="checkbark">Hear a dog</label>このスニペットは、チェックボックスのラベルは、必ずしもチェックボックス自体の横に表示する必要がないという事実を使用しています。そこで、チェックボックスをh3の上に、ラベルをその下に置きます。
また、ラベルにいくつかの装飾を追加して、チェックボックスがその場所にあるように見せましたが、それは化粧品です。それを使用する必要はありません。
a * before *兄弟のためのjavascriptなしではできません。チェックボックスの後に '.bark'が** **だった場合、'：checked + .bark {visibility：visible; } 'あなたはそれにjavascriptタグを付けなかったので、私は直接答えませんでした。 –
それは私の問題でした。私はCSSだけでそれが欲しかった。これは説明しています。 – Deke
[前の兄弟のCSSセレクタはありますか？]（http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector） – Abhitalks