Question

复选时如何隐藏图像/显示输入复选框，再次选中复选框时显示图像/隐藏输入？

缩略图：

<div id="thumbnail_image">
    <img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg">
</div>

<input type="file" name="offer_image_1" id="offer_image_1" size="30" hidden ">
<br>
<input type="checkbox" id="change_thumbnail_image" name="change_thumbnail_image" value="change_thumbnail_image" class="checkme_ram" /> Change Thumbnail Image 

<script type="text/javascript">
document.getElementById('change_thumbnail_image').onchange = function() {
    document.getElementById('thumbnail_image').hidden = this.checked;
    document.getElementById('offer_image_1').block = this.checked;
};
</script>

Answer 1

使用jQuery，您可以使用.toggle()

jQuery(function ($) {
    $('#change_thumbnail_image').change(function () {
        $('#thumbnail_image, #offer_image_1').toggle(this.checked);
    }).change(); //trigger the change event so that the initial display is set properly
})

使用vanilla脚本时，需要设置显示样式属性，如

document.getElementById('thumbnail_image').style.display = this.checked ? 'block' : 'none';

Answer 2

我仍然怀疑你要求的......但似乎你问过这个......

<!doctype html>
    <html>
        <head>

        </head>
        <body>
            <div id="thumbnail_image">
                <img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg">
            </div>

            <input type="file" name="offer_image_1" id="offer_image_1" size="30" hidden ">
            <br/><br/>
            <input type="checkbox" id="change_thumbnail_image" name="change_thumbnail_image" value="change_thumbnail_image" class="checkme_ram" /> Change Thumbnail Image 

            <script type="text/javascript">
                document.getElementById('change_thumbnail_image').onchange = function() {
                    document.getElementById('thumbnail_image').hidden = this.checked;
                    document.getElementById('offer_image_1').hidden = !this.checked;

                };
            </script>
        </body>
    </html>

Answer 3

试试这个，

使用jQuery

jQuery('#change_thumbnail_image').change(function () {
if(jQuery("#change_thumbnail_image").is(':checked')){

 jQuery("#thumbnail_image").hide();
 jQuery("#offer_image_1").show();
}
else{
 jQuery("#thumbnail_image").show();
 jQuery("#offer_image_1").hide();

}
});

如何在选中复选框时隐藏图像/显示输入，并在复选时显示图像/隐藏输入复选框？

3 个答案: