程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

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

+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

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

发布于2023-03-23 07:20     阅读(333)     评论(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>
  1. 我还想知道现在如何在控制器中仅检索选定的项目和数量

解决方案


这里有两个主要问题。首先,您的 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>



所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.phpheidong.com/blog/article/520591/71683a6d935ba4a9d8f1/

来源:php黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

12 0
收藏该文
已收藏

评论内容:(最多支持255个字符)