отобразить текстовое поле, щелкнув массив CheckBox

Question

Я отображал список элементов с флажком. Я хочу, чтобы пользователь проверил желаемые товары и ввел желаемое количество для товара. Я спрятал текстовое поле Количество (txtQty), используя CSS. Я хочу, если вы щелкнете по элементу, появится соответствующий текст txtQty, чтобы вы могли ввести желаемое количество. Я использую CodeIgniter. Таким образом, я успешно провел данные от MySQL через модель к представлению и отобразил их, как показано на прилагаемом изображении интерфейса. Я использую Jquery, чтобы скрыть и показать. Интерфейс

Мой код: 2. Просмотр кода (PHP)

<table class="card1 table table-striped table-bordered table-responsive" style="height: 350px; overflow: scroll">
    <thead>
        <tr>
            <th>SN</th>
            <th>Product</th>
            <th>Tick</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <?php $i=0; foreach($it as $r): $i++; ?>
        <tr>
            <td><?php echo $i; ?></td>
            <td><?=$r['Item'];?></td>
            <td>
                <label>
                    <input type="checkbox" name="item[]" value="<?=$r['Item']?>" id="jj">
                </label>
            </td>
            </td>
            <td> 
                <input type="number" name="qty[]" id="tx" style="display: none" />
                <input type="hidden" name="price" value="<?=$r['CostPrice']?>" />
            </td>
        </tr> 
        <?php endforeach?>
        <tr>
            <td colspan="3">
                <input type="submit" name="btnub" value="Send Order" class="btn btn-warning card1" />
            </td>
        </tr>
    </tbody>
</table>

3. мой Jquery код.

<script>
    $(document).ready(function() {
        $('#jj').change(function () {
            if (this.checked) {
                $('#tx').show();
            } else {
                $('#tx').hide();
            }
        });
    });
</script>

Мне также хотелось бы узнать, как теперь получать только выбранные товары и количество на контроллере

Answer 1

Здесь есть две основные проблемы. Во-первых, ваш PHP l oop создает HTML с повторяющимися id атрибутами. Это недопустимо, так как id имеет уникальность в DOM. Вместо этого измените их на классы.

Как следствие, вы больше не можете использовать id для выбора элемента #tx. Вам нужно будет выбрать его по классу, используя обход DOM, чтобы связать его с установленным флажком c, который был изменен.

Также обратите внимание, что условие if можно упростить с помощью toggle(), и что у вашего HTML есть дополнительный </td>, который можно удалить.

Со всем, что сказано попробуйте это:

jQuery($ => {
  $('.jj').on('change', function() {
    $(this).closest('tr').find('.tx').toggle(this.checked);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="card1 table table-striped table-bordered table-responsive" style="height: 350px; overflow: scroll">
  <thead>
    <tr>
      <th>SN</th>
      <th>Product</th>
      <th>Tick</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Foo</td>
      <td><label><input type="checkbox" name="item[]" value="100" class="jj"></label></td>
      <td>
        <input type="number" name="qty[]" class="tx" style="display: none" />
        <input type="hidden" name="price" value="50" />
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Bar</td>
      <td><label><input type="checkbox" name="item[]" value="100" class="jj"></label></td>
      <td>
        <input type="number" name="qty[]" class="tx" style="display: none" />
        <input type="hidden" name="price" value="50" />
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>Fizz</td>
      <td><label><input type="checkbox" name="item[]" value="100" class="jj"></label></td>
      <td>
        <input type="number" name="qty[]" class="tx" style="display: none" />
        <input type="hidden" name="price" value="50" />
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>Buzz</td>
      <td><label><input type="checkbox" name="item[]" value="100" class="jj"></label></td>
      <td>
        <input type="number" name="qty[]" class="tx" style="display: none" />
        <input type="hidden" name="price" value="50" />
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <input type="submit" name="btnub" value="Send Order" class="btn btn-warning card1" />
      </td>
    </tr>
  </tbody>
</table>