Show or hide table row if checkbox is checked

Question

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

This type of question has been asked here so many times already... — SomeShinyObject
– SomeShinyObject, Commented Dec 23, 2014 at 13:18

Mohamad Shiralizadeh · Accepted Answer · 2014-12-23 13:26:09Z

5

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

edited Dec 23, 2014 at 13:26

answered Dec 23, 2014 at 13:18

Mohamad Shiralizadeh

8,8348 gold badges65 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

musefan · Accepted Answer · 2014-12-23 13:19:04Z

4

Just call the change event after you initially register it:

$(document).ready(function () {
    $('#checkbox').change(function () {
        if (!this.checked) 
            $('#row').fadeIn('slow');
        else 
            $('#row').fadeOut('slow');
    });
    $('#checkbox').change();
});

answered Dec 23, 2014 at 13:19

musefan

48.5k21 gold badges144 silver badges193 bronze badges

Comments

vkh · Accepted Answer · 2014-12-23 13:53:01Z

2

Musefan's answer is excelent, but following is also another way!

$(document).ready(function () {
($('#checkbox').prop('checked')==true) ? $('#row').fadeOut('slow'):$('#row').fadeIn('slow');
    $('#checkbox').change(function () {
        if (!this.checked) 
            $('#row').fadeIn('slow');
        else 
            $('#row').fadeOut('slow');
    });
});

answered Dec 23, 2014 at 13:53

vkh

234 bronze badges

Comments

Duncan Lukkenaer · Accepted Answer · 2016-03-11 18:47:12Z

2

I believe this is what you were looking for:

$(function() {
  var init = true;
  $('input[type="checkbox"]').change(function() {
    if (this.checked) {
      if (init) {
        $(this).prev().hide();
        init = false;
      } else $(this).prev().slideUp();
    } else $(this).prev().slideDown();
  }).change();
});

input[type='text'] {
  display: block;
  padding: 3px 5px;
  margin: 5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <input type="text" placeholder="Shown" />
  <input type="checkbox" />Hide input
</div>

<div>
  <input type="text" placeholder="Hidden" />
  <input type="checkbox" checked/>Hide input
</div>

answered Mar 11, 2016 at 18:47

Duncan Lukkenaer

14.2k19 gold badges75 silver badges109 bronze badges

Comments

dfsq · Accepted Answer · 2014-12-23 13:27:22Z

1

Generic solution without hardcoded ids:

$('table :checkbox').change(function(e, speed) {
    speed = typeof speed == 'undefined' ? 'slow' : 0;
    $(this).closest('tr').prev()[this.checked ? 'fadeOut' : 'fadeIn'](speed);
}).trigger('change', [0]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr id="row1">
        <td><input type="text"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td><input type="checkbox" id="checkbox1">Hide inputs</td>
    </tr>
        
    <tr id="row2">
        <td><input type="text"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td><input type="checkbox" id="checkbox2" checked>Hide inputs</td>
    </tr>
</table>

edited Dec 23, 2014 at 13:27

answered Dec 23, 2014 at 13:20

dfsq

193k26 gold badges244 silver badges261 bronze badges

Comments

Sajad Karuthedath · Accepted Answer · 2014-12-23 13:31:30Z

1

just call the change function in document.ready after it

 $('#checkbox').change();

Like this

$(document).ready(function () {

    $('#checkbox').change(function () {
        if (!this.checked) $('#row').fadeIn('slow');
        else $('#row').fadeOut('slow');
    });
    $('#checkbox').change();
});

Here is the DEMO FIDDLE

answered Dec 23, 2014 at 13:31

Sajad Karuthedath

16.2k4 gold badges35 silver badges50 bronze badges

Comments

Michael Angelo Casabar · Accepted Answer · 2014-12-23 13:27:27Z

0

you can initially hide them if you really want the checkbox to be checked initially.

<table>
<tr id="row" style="display: none;">
    <td><input type="text"></td>
    <td><input type="text"></td>
</tr>
<tr>
    <td><input type="checkbox" id="checkbox" checked>Hide inputs</td>
</tr>
</table>
<script>
$(document).ready(function () {
$('#checkbox').change(function () {
    if (!this.checked) 
        $('#row').fadeIn('slow');
    else 
        $('#row').fadeOut('slow');
});
});
</script>

answered Dec 23, 2014 at 13:27

Michael Angelo Casabar

135 bronze badges

Comments

Saketh · Accepted Answer · 2014-12-23 13:33:42Z

0

var showOrHideRow=fucntion(isChecked){
   if (isChecked) 
            $('#row').fadeOut('slow');
        else 
            $('#row').fadeIn('slow');
};

$(document).ready(function () {
showOrHideRow($('#checkbox').is(":checked"));

    $('#checkbox').change(function () {
        showOrHideRow(this.checked);
    });

});

answered Dec 23, 2014 at 13:33

Saketh

936 bronze badges

Comments

Sheladiya Ajay · Accepted Answer · 2019-01-13 06:44:35Z

0

$('#tbl_name tr').find('input:checkbox:checked').closest('tr').show(); $('#tbl_name tr').find('input:checkbox:Unchecked').closest('tr').hide();

answered Jan 13, 2019 at 6:44

Sheladiya Ajay

711 silver badge3 bronze badges

Collectives™ on Stack Overflow

Show or hide table row if checkbox is checked

9 Answers 9

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related