Question

我制作了一个表格，在项目名称旁边显示我的数据库项目，我也在表格中显示复选框以选择项目，因此项目由php动态呈现。因此，复选框也将按照项目计数重复，但是，现在我想使用表格中的复选框仅显示所选项目的另一个输入字段。我得到了结果但只有一半，因为如果通过复选框选择一个项目所有剩余的项目输入字段都显示而不是仅显示所选项目。因为我正在使用jquery更改.show（）和.hide（）方法但是我如何显示输入仅适用于所选项目的字段.... 下面是代码

self.paymentTextField.layer.borderColor = [UIColor clearColor].CGColor;

Answer 1

您应该使用class代替id，因为您使用了多次，然后.cost-box parent()找到了siblings()

＆＃13;

$(".cost-box").hide();
$(".item").click(function() {
  if ($(this).is(":checked")) {
    $(this).parent().siblings().find(".cost-box").show();
  } else {
    $(this).parent().siblings().find(".cost-box").hide();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-striped table-hover js-basic-example dataTable">
  <thead>
    <tr>
      <th>S.No</th>
      <th>Item</th>
      <th>Category</th>
      <th>Select</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>1</td>
      <td>coffee</td>
      <td>Drinks</td>
      <td>
        <div class="row">
          <div class="col-sm-2">
            <input type="checkbox" name="itemid" value="1" class="check item">
          </div>
          <div class="col-sm-10">
            <div class="form-group cost-box">
              <div class="form-line">
                <input type="number" name="qty" class="form-control" placeholder="Enter Quantity" />
              </div>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>1</td>
      <td>Milk shake</td>
      <td>Drinks</td>
      <td>
        <div class="row">
          <div class="col-sm-2">
            <input type="checkbox" name="itemid" value="1" class="check item">
          </div>
          <div class="col-sm-10">
            <div class="form-group cost-box">
              <div class="form-line">
                <input type="number" name="qty" class="form-control" placeholder="Enter Quantity" />
              </div>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>1</td>
      <td>Banana</td>
      <td>Fruit</td>
      <td>
        <div class="row">
          <div class="col-sm-2">
            <input type="checkbox" name="itemid" value="1" class="check item">
          </div>
          <div class="col-sm-10">
            <div class="form-group cost-box">
              <div class="form-line">
                <input type="number" name="qty" class="form-control" placeholder="Enter Quantity" />
              </div>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

首先，你必须拥有独特的ID。

其次，您必须更改功能以仅显示相应的元素。请尝试下面的代码以供参考

$(".cost-box").hide();
$("#item").click(function() {
  $(".cost-box").hide();
  if($(this).is(":checked")) {
     $(this).parents().eq(1).find(".cost-box").show();
  }
});

仅通过复选框选择时如何显示文本框

2 个答案: