Question

125

Show or hide table row if checkbox is checked

rated 0 times [ 132] [ 7] / answers: 1 / hits: 20563 / 10 Years ago, tue, december 23, 2014, 12:00:00

I want to hide a table row (with input fields inside) when a checkbox is checked.
I found something that works:

HTML

<table>

    <tr id=row>

        <td><input type=text></td>

        <td><input type=text></td>

    </tr>

    <tr>

        <td><input type=checkbox id=checkbox>Hide inputs</td>

    </tr>

</table>

Script

$(document).ready(function () {

    $('#checkbox').change(function () {

        if (!this.checked) 

            $('#row').fadeIn('slow');

        else 

            $('#row').fadeOut('slow');

    });

});

Fiddle

But this only works if the checkbox is not checked already. So if the checkbox is checked at the beginning, I want the table row to be hidden. How do I do this?

Please note that I don't know much about JavaScript, but I really need this

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aricl

Add To Favorites

Follow

Total Points: 215

Total Questions: 91

Total Answers: 94

Location: Venezuela

Member since Thu, Jul 15, 2021

3 Years ago

aricl questions

1 Error passing tabBarOptions property of react navigation

Mon, Aug 2, 21, 00:00, 3 Years ago

1 how to make a new line for react

Mon, Aug 3, 20, 00:00, 4 Years ago

1 primeng checkbox with reactive form with array

Thu, Feb 13, 20, 00:00, 4 Years ago

1 Merge cells together in 'xlsx-populate' module for node js

Wed, Oct 23, 19, 00:00, 5 Years ago

1 How to access current value in a text input field with puppeteer

Wed, Sep 4, 19, 00:00, 5 Years ago

View All

answered 10 Years ago leighrheac · Accepted Answer

trigger .change() event after you attach events:

$(function () {

    $('#checkbox1, #checkbox2').change(function () {

        var row = $(this).closest('tr').prev();



        if (!this.checked)

            row.fadeIn('slow');

        else 

            row.fadeOut('slow');



    }).change();

});

Note: I make code shorter.

jsfiddle