0

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

5 に答える 5

6

jQueryでそれを行うコンパクトな方法：

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

作業デモ：JSFiddle。

于 2012-08-14T13:01:33.057 に答える
1

これを試して：

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

    $('input#post').change( function(e) {
        if($(this).attr('checked'))
        {
            $('tr#hidden').show();
        }
        else
        {
            $('tr#hidden').hide();
        }
    });
});
于 2012-08-14T13:08:19.743 に答える
1

これを試して：

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

フィドル

于 2012-08-14T13:00:25.130 に答える
0

これを試してみてください....

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script> $("#post").click(function(){ $("#hidden").toggle(); })); </script>
于 2012-08-14T13:03:36.017 に答える
0

例:

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

于 2012-08-14T13:13:43.410 に答える