How can i show/hide when clicked on checkbox using javascript or jquery?

Question

How can i show/hide td when clicked on checkbox using javascript or jquery? I want to replace td- table data when i unchecked checkbox. Like this..

https://i.stack.imgur.com/qBekm.jpg

when i unchecked it it will look like 2 image

Here is my code

   <table>
<tr>
    <td>
        Time Period:
        <td>
            <input type="checkbox" id="isCheck" name='works' value='works' />&nbsp;&nbsp;I
            currently work here
        </td>
    </td>
</tr>
<tr>
    <td>
        Month: &nbsp;<select name="workmonth">
            <option>- Month -</option>
            <option value="1">January</option>
            <option value="2">Febuary</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
        </select>
    </td>
    <td>
        Year: &nbsp;<select name="workyear">
            <option>- Year -</option>
            <option value="2011">2011</option>
            <option value="2010">2010</option>
            <option value="2009">2009</option>
            <option value="2008">2008</option>
            <option value="2007">2007</option>
            <option value="2006">2006</option>
            <option value="2005">2005</option>
            <option value="2004">2004</option>
            <option value="2003">2003</option>
            <option value="2002">2002</option>
            <option value="2001">2001</option>
            <option value="2000">2000</option>
            <option value="1999">1999</option>
            <option value="1998">1998</option>
            <option value="1997">1997</option>
            <option value="1996">1996</option>
            <option value="1995">1995</option>
            <option value="1994">1994</option>
            <option value="1993">1993</option>
            <option value="1992">1992</option>
            <option value="1991">1991</option>
            <option value="1990">1990</option>
            <option value="1989">1989</option>
            <option value="1988">1988</option>
            <option value="1987">1987</option>
            <option value="1986">1986</option>
            <option value="1985">1985</option>
            <option value="1984">1984</option>
            <option value="1983">1983</option>
            <option value="1982">1982</option>
            <option value="1981">1981</option>
            <option value="1980">1980</option>
        </select>
    </td>
    <td>
        To present.
    </td>
    <td>
        <td>
            Month: &nbsp;<select name="workmonth">
                <option>- Month -</option>
                <option value="1">January</option>
                <option value="2">Febuary</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
            </select>
        </td>
        <td>
            Year: &nbsp;<select name="workyear">
                <option>- Year -</option>
                <option value="2011">2011</option>
                <option value="2010">2010</option>
                <option value="2009">2009</option>
                <option value="2008">2008</option>
                <option value="2007">2007</option>
                <option value="2006">2006</option>
                <option value="2005">2005</option>
                <option value="2004">2004</option>
                <option value="2003">2003</option>
                <option value="2002">2002</option>
                <option value="2001">2001</option>
                <option value="2000">2000</option>
                <option value="1999">1999</option>
                <option value="1998">1998</option>
                <option value="1997">1997</option>
                <option value="1996">1996</option>
                <option value="1995">1995</option>
                <option value="1994">1994</option>
                <option value="1993">1993</option>
                <option value="1992">1992</option>
                <option value="1991">1991</option>
                <option value="1990">1990</option>
                <option value="1989">1989</option>
                <option value="1988">1988</option>
                <option value="1987">1987</option>
                <option value="1986">1986</option>
                <option value="1985">1985</option>
                <option value="1984">1984</option>
                <option value="1983">1983</option>
                <option value="1982">1982</option>
                <option value="1981">1981</option>
                <option value="1980">1980</option>
            </select>
        </td>
    </td>
</tr>

How can i replace

when checked? you can find my code on http://jsfiddle.net/WhEWP/

there is something fundamentally wrong with your code before i can try to answer, i would like to ask, why do you next `` elements? that is not allowed, a `` should never hold 1 or more other `'s` — Sander, Oct 04 '11 at 10:23

score 0 · Accepted Answer · answered Oct 04 '11 at 10:22

First add id's to all <td>'s in 2nd row, then:

$('#isCheck').click(function()
{
   if ($(this).is(':checked'))
   {
      $('#id_of_4th_td').hide();
      $('#id_of_5th_td').hide();
      $('#id_of_3th_td').html('to present');
   }
   else
   {
      $('#id_of_4th_td').show();
      $('#id_of_5th_td').show();
      $('#id_of_3th_td').html('to');
   }
});

score 0 · Answer 2 · edited May 23 '17 at 09:59

0

Information already on stackoverflow.

$('#isAgeSelected').click(function() {
    $("#txtAge").toggle(this.checked);
});

edited May 23 '17 at 09:59

Community

1
1

answered Oct 04 '11 at 10:25

Ernestas Stankevičius

2,420
2
24
30

Hi Ernestas Stankevičius Yes but its using div. And i am working on table structure. Not getting exactly what i want. – Debugmode Oct 04 '11 at 10:29
Anyway you will need to set IDs/Classes for table, so its the same thing. – Ernestas Stankevičius Oct 04 '11 at 10:32

How can i show/hide when clicked on checkbox using javascript or jquery?

2 Answers2