如果选中复选框，则显示div？

Question

i have a checkbox like this:

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

and i am trying to use jquery to try and display div id '#content_more' when the checkbox is ticked and if it is unticked to re-hide the div.

i am using this and i am not able to get it to work, can anyone please show me where i am going wrong, thanks

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

Answer 1

Depending on the structure of your HTML, you can accomplish this without a single line of JavaScript using the :checked CSS pseudo selector - given your CSS and content, here are a few examples:

HTML Scenario 1 - immediately adjacent element:

<input type="checkbox" id="terms" />
<div class="content_more">hello</div>

CSS solution:

#terms:checked + .content_more {
  display: block;
}

HTML Scenario 2 - non-adjacent sibling:

<input type="checkbox" id="terms" />
<div>foo</div>
<div>bar</div>
<div class="content_more">hello</div>

CSS solution:

#terms:checked ~ .content_more {
  display: block;
}

HTML Scenario 3 - target nested within non-adjacent sibling:

<input type="checkbox" id="terms" />
<div>foo</div>
<div>bar</div>
<section>
  <div class="content_more">hello</div>
</section>

CSS solution:

#terms:checked ~ section .content_more {
  display: block;
}

This solution depends on your HTML structure - if you provide a bit more in your question, I could be more specific with the CSS examples above.

Answer 2

Use the change event (to recognise non-mouse interactions such as the user using their keyboard), and then use the .toggle() function:

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

jsFiddle demo

Note that if your <script> tag comes before the actual HTML to create the elements then the jQuery will execute before there are any elements to select, and therefore not bind any event handlers. To resolve that you'll need to use a DOM ready handler:

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

Answer 3

Try This:

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

Working fiddle: http://jsfiddle.net/robertrozas/x5r98/

Answer 4

You need to change to class in your jQuery selector and fix the display typo in your CSS.

Try this:

$(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