单击复选框数组显示文本框

Question

我显示了一个带有复选框的项目列表。我希望用户检查他想要的项目，并输入他想要的数量。我使用CSS隐藏了数量文本框(txtQty(。我想如果你点击一个项目，会出现相应的txtQty，让你输入你想要的数量。我正在使用CodeIgniter。因此，我成功地通过Model将MySQL中的数据拉到了View中，并将其显示出来，如所附的界面图像所示。我正在使用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>

4. 我还想知道现在如何在控制器上只检索选定的项目和数量

Answer 1

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

因此，您不能再使用id来选择#tx元素。您需要使用DOM遍历通过它的类来选择它，以便将它与更改的特定复选框关联起来。

还要注意，使用toggle()可以简化if条件，并且您的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>