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

Posted 2023-05-08

【中文标题】通过单击 CheckBox 数组显示文本框

【英文标题】：display a Textbox by clicking CheckBox array

【发布时间】：2020-08-14 12:32:45

【问题描述】：

我用复选框显示了一个项目列表。我希望用户检查他想要的项目并输入他想要的项目数量。我使用 CSS 隐藏了数量文本框 (txtQty)。我想如果你点击一个Item，就会出现对应的txtQty供你输入你想要的Quantity。 我正在使用 CodeIgniter。所以我已经成功地从 mysql 中通过 Model 拉取数据到 View 并显示出来，如随附的界面图片所示。我正在使用 Jquery 进行隐藏和显示。 The Interface

我的代码： 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。这是无效的，因为 id 必须 在 DOM 中是唯一的。将它们改为类。

因此，您不能再使用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>

【讨论】：

谢谢罗里先生。有效。我能够选择并且数量框出现在选择中。

但是，现在的问题是：如何对用户选择的相应项目的价格求和以及如何获得金额：注意->金额=（数量之和）*（价格之和)