jquery - 选中复选框时显示表格行

Question

使用 jquery 如何在选中/取消选中id="hidden"复选框时显示/隐藏行id="post"？

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

Answer 1

使用jQuery的一种紧凑方式：

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

工作演示：JSFiddle。

Answer 2

试试这个：

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

小提琴

Answer 3

试试这个：

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

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

Answer 4

试试这个....

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

Answer 5

好的例如：

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

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

像这样使用 Jquery：

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

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

此外，这是一个工作示例：http: //jsfiddle.net/dbs3r/