通过单击 CheckBox 数组显示文本框-php黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

429120

文章

217419268

访问

+关注

分类

暂无分类

日期归档

暂无数据

通过单击 CheckBox 数组显示文本框

发布于2023-03-23 07:20 阅读(328) 评论(0) 点赞(12) 收藏(1)

我显示了一个带有复选框的项目列表。我希望用户检查他想要的物品并输入他想要的物品数量。我使用 CSS 隐藏了数量文本框 (txtQty)。我想如果你点击一个Item，就会出现相应的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>

我还想知道现在如何在控制器中仅检索选定的项目和数量

解决方案

这里有两个主要问题。首先，您的 PHP 循环正在创建具有重复id属性的 HTML。这是无效的，因为在 DOM 中必须是唯一的id 。改为将它们更改为类。

作为必然结果，您不能再使用id来选择#tx元素。您需要使用 DOM 遍历按类选择它，以将其与已更改的特定复选框相关联。

另请注意，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>