Question

如何使用javascript或jquery点击复选框时显示/隐藏td？当我取消选中复选框时，我想替换td表数据。像这样......

http://i.imgur.com/tWUUh.jpg

当我取消选中它时，它看起来像2图像

这是我的代码

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

找到我的代码

Answer 1

首先将id添加到第二行中的所有<td>，然后：

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

Answer 2

stackoverflow已有的信息。

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

如何使用javascript或jquery点击复选框时显示/隐藏？

2 个答案: