javascript - 仅通过复选框选中时如何显示文本框

Question

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

html table code
----------
<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" id='item'  class="check">
                                            </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="2" id='item'  class="check">
                                            </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="3" id='item'  class="check">
                                            </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>


----------
jquery code

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

Answer 1

你应该使用class而不是id，因为你使用了不止一次，然后通过parent找到了.cost-box () sibling ()

$(".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();
  }
});

<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>