如果选中复选框显示div?

时间:2014-03-31 15:39:34

标签: javascript jquery

我有一个像这样的复选框:

<input type="checkbox" id="terms" name="terms" value="yes" class="tick2">

并且我正在尝试使用jquery尝试在勾选复选框时显示div id'#content_more',如果未勾选则重新隐藏div。

我正在使用这个,我无法让它工作,任何人都可以告诉我我哪里出错了,谢谢

<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;

4 个答案:

答案 0 :(得分:1)

根据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示例。

答案 1 :(得分:0)

使用change事件(识别非鼠标交互,例如用户使用键盘),然后使用.toggle()功能:

$('.tick2').change(function(e) {
    $('#content_more').toggle(this.checked);
});

jsFiddle demo

请注意,如果您的<script>标记位于实际HTML之前以创建元素,那么jQuery将在有任何要选择的元素之前执行,因此不会绑定任何事件处理程序。要解决这个问题,您需要使用DOM就绪处理程序:

$(document).ready(function () {
    $('.tick2').change(function (e) {
        $('#content_more').toggle(this.checked);
    });
});

答案 2 :(得分:0)

试试这个:

$(document).ready(function(){
 $('.tick2').click(function() {
   $(".content_more").toggle("hide");
 });
});

工作小提琴:http://jsfiddle.net/robertrozas/x5r98/

答案 3 :(得分:0)

您需要在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
}

Example