Question

我有一些<form>和textfields selections元素，所以当我选中<input type="text">并删除时，我想要添加几个新的checkbox它们，当它没有被检查时。

最好的方法是什么？

是否可以将新元素分配给变量或对象，然后使用此变量或对象作为删除新元素的引用，因为它假设要同时添加多个元素（例如<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>，其中/***/是给定的，当复选框被解除时，删除，当它不是。

最好的方法是什么？

谢谢！

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;
        }
    });
});

使用JavaScript添加或删除输入字段，具体取决于复选框

2 个答案: