使用JavaScript添加或删除输入字段（取决于复选框）

Question

我有带有一些textfields和selections <form>元素，所以我希望在checkbox一个checkbox时添加几个新的<input type="text"> ，而在未选中它时将其删除。

最好的方法是什么？

是否可以将新元素分配给变量或对象，然后使用该变量或对象作为引用来删除新元素，因为应该同时添加多个元素（例如<br><inpit type="text"> ），我认为单独添加它们不是最好的方法，因此也要删除。

我正在使用JQuery作为框架。

<form name="add_subject">

<table cellspacing="1">
    <tr>
        <td class="key">Day</td>
        <td class="value">
            <select size="7" name="day">
                <option value="1">...</option>
                <option value="2">...</option>
            </select>
        </td>
    </tr>
    <tr>
        <td class="key">Groups</td>
        <td class="value">
            <input type="checkbox" name="sg">
        </td>
    </tr>
    <tr>
        <td class="key">Lecture</td>
        <td class="value">
            <input type="text" size="50" maxlength="50" name="lec1"> /***/
        </td>
    </tr>
    <tr>
        <td class="key">Auditory</td>
        <td class="value">
            <input type="text" size="4" maxlength="4" name="aud1"> /***/
        </td>
    </tr>
</table>

我想增加<br><input type="text"> : <input type="text">后，现有<input>字段; /***/给出，当复选框被cheked和删除，当它的不。

什么是最好的方法？

谢谢！

Answer 1

如果无法正常运行，请尝试调试下一个（有想法）：

$( '.value>[type=checkbox]' ).click(
  function()
  {
    if( $( this ).is(':checked') )
    {
      $( 'td.value' ).append( '<br id="myinput"><input type="text"> : <input type="text">' );
    }
    else
    {
      $( '#myinput' ).remove();
    }
  }

)

Answer 2

我已经将输入字段放入标记中，例如：

<td class="value">
  <input type="text" size="50" maxlength="50" name="lec1">
  <div class="some-class">
    <input type="text"> : <input type="text">
  </div>
</td>

等等。然后默认使用此CSS规则将其隐藏：

div.some-class {
    display: none;
}

现在，将一个事件处理程序添加到您的复选框，该事件处理程序只要单击该复选框即可简单地切换some-class div的可见性：

$(document).ready(function() {
    var visible = false;
    $('input[name="sg"]').click(function() {
        var divs = $('div.some-class'); 
        if (visible) {
            divs.each(function() {
                this.style.display = 'none';
            });
            visible = false;
        }
        else {
            divs.each(function() {
                this.style.display = 'block';
            });
            visible = true;
        }
    });
});