[英]if checkbox is checked show div?
我有一個這樣的復選框:
<input type="checkbox" id="terms" name="terms" value="yes" class="tick2">
我正在嘗試使用jquery嘗試在選中復選框並且未選中以重新隱藏div時顯示div id'#content_more'。
我正在使用它,但我無法使它正常工作,有人可以告訴我我要去哪里了,謝謝
<script>
$('.tick2').click(function() {
if( $(this).is(':checked')) {
$("#content_more").show();
}
});
</script>
HTML:
<div class="content_more">hello</div>
CSS:
#content_more{
width: 990px;
margin: auto;
background: #ddd;
height: auto;
overflow: hidden;
margin-top:50px;
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
font-size:14px;
background-color: white;
padding: 9px 11px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #c5c5c5;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-bottom:60px;
dipslay:none;
根據HTML的結構,您可以使用:checked
CSS偽選擇器而無需一行JavaScript來完成此操作-給定您的CSS和內容,以下是一些示例:
HTML場景1-緊鄰元素:
<input type="checkbox" id="terms" />
<div class="content_more">hello</div>
CSS解決方案:
#terms:checked + .content_more {
display: block;
}
HTML方案2-不相鄰的同級:
<input type="checkbox" id="terms" />
<div>foo</div>
<div>bar</div>
<div class="content_more">hello</div>
CSS解決方案:
#terms:checked ~ .content_more {
display: block;
}
HTML方案3-目標嵌套在非相鄰的同級中:
<input type="checkbox" id="terms" />
<div>foo</div>
<div>bar</div>
<section>
<div class="content_more">hello</div>
</section>
CSS解決方案:
#terms:checked ~ section .content_more {
display: block;
}
此解決方案取決於您的HTML結構-如果您在問題中提供的內容更多,我可以在上面的CSS示例中更加具體。
使用change
事件(以識別非鼠標交互,例如用戶使用他們的鍵盤),然后使用.toggle()
函數:
$('.tick2').change(function(e) {
$('#content_more').toggle(this.checked);
});
請注意,如果您的<script>
標記位於創建元素的實際HTML之前,則jQuery將在有任何元素可供選擇之前執行,因此不會綁定任何事件處理程序。 要解決此問題,您需要使用DOM ready處理程序:
$(document).ready(function () {
$('.tick2').change(function (e) {
$('#content_more').toggle(this.checked);
});
});
嘗試這個:
$(document).ready(function(){
$('.tick2').click(function() {
$(".content_more").toggle("hide");
});
});
您需要在jQuery選擇器中更改類,並在CSS中修復顯示錯誤。
嘗試這個:
$(document).ready(function () {
$('.tick2').click(function () {
$(".content_more").toggle(!this.checked);
});
});
CSS
// ...
border-radius: 3px;
margin-bottom:60px;
display:none; // typo here in your code
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.