CODEWITHSUNDEEP
jqueryhtmlwordpress
Rob
Rob

Reputation: 6380

Display table row when checkbox is checked

Using jquery how can I display/hide the row with id="hidden" when the checkbox id="post" is checked/unchecked?

    <tr>
        <td valign="top">
            <p>Contact Method:</p>
        </td>
        <td>&nbsp;</td>
        <td align="left" valign="top">
                <p>
                    <input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Phone" id="phone" />
                    <label style="margin-right: 25px;">Phone</label>
                </p>
                <p>
                    <input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Email" id="email" />
                    <label style="margin-right: 25px;">Email</label>
                </p>
                <p>
                    <input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Post" id="post" />
                    <label style="margin-right: 25px;">Post</label>
                </p>
        </td>
    </tr> 
    <tr id="hidden">    
        <td>
        <p>Address (if applicable):</p>
        </td>
        <td>&nbsp;</td>
        <td colspan="2"><input type="text" name="address" id="address" /></td>
    </tr>

Upvotes: 0

Views: 3513

Answers (5)

Chris
Chris

Reputation: 26888

A compact way of doing it with jQuery:

$(document).ready(function() {    
    $("#post").change(function () {
        $("#hidden").toggle();
    });
})

Working demo: JSFiddle.

Upvotes: 6

Anoop
Anoop

Reputation: 993

try this one....

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script> $("#post").click(function(){ $("#hidden").toggle(); })); </script>

Upvotes: 0

Amyth
Amyth

Reputation: 32959

Ok For Example:

<div id="hidden">
<p>Some Sample Content</p>
</div>

<div id="control">
<input type="checkbox" id="check" />
<label for="check">Show Element</label>
</div>​

Use Jquery like this:

$(document).ready(function(){
    $('#check').click(function(){
        checkIt();
    });
});

function checkIt(){
    if ($('#check:checked').val() == "on"){
        $('#hidden').css({'display':'block'});
    } else {
        $('#hidden').css({'display':'none'});
    }
}

Also, here is a working example: http://jsfiddle.net/dbs3r/

Upvotes: 0

Ram
Ram

Reputation: 144699

Try this:

$(document).ready(function() {
    $('#post').change(function(){
        $('#hidden').css('display', this.checked ? 'block' : 'none')
    })
})

Fiddle

Upvotes: 1

mmcachran
mmcachran

Reputation: 484

Try this:

jQuery( function ($) {
    $('tr#hidden').hide();

    $('input#post').change( function(e) {
        if($(this).attr('checked'))
        {
            $('tr#hidden').show();
        }
        else
        {
            $('tr#hidden').hide();
        }
    });
});

Upvotes: 1

Related Questions