Добавить или удалить поле ввода, в зависимости от флажка, используя JavaScript

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

Я бы уже поместил поля ввода в разметку, например:

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

Answer 2

Попробуйте отладить следующее, пожалуйста, если не работает должным образом (есть идея):

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

)