如何显示/隐藏<td>当点击复选框使用javascript或jquery

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

本文关键字:复选框 jquery javascript td 显示 隐藏 何显示      更新时间:2023-09-26

当使用javascript或jquery单击复选框时,我如何显示/隐藏td ?当我未选中复选框时,我想替换td-表数据。像这样. .

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

当我选中

的时候它会变成2 image

我的代码

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

如何替换选中的

?你可以在http://jsfiddle.net/WhEWP/
找到我的代码

首先将id's添加到第二行所有<td> 's中,然后:

$('#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');
   }
});

信息已经在stackoverflow上。

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