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

【问题标题】：how to display text box when only selected by checkbox仅通过复选框选择时如何显示文本框
【发布时间】：2018-03-11 11:15:16
【问题描述】：

我制作了一个表格，在项目名称旁边显示我的数据库项目，我还在表格中显示复选框以选择项目，因此项目由 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();
    }
});

【问题讨论】：

您首先需要修复无效的 HTML - ID 必须在 HTML 文档中是唯一的。
兄弟我知道，但因此选择框不会静态呈现以提供唯一 ID，因此只有一个具有相同 ID 的选择框将被重复呈现......
“兄弟我知道” - 那么修复它，而不是找借口！
酷哥，我不是在和你吵架，只是要求加油……
您知道 id 必须是唯一的。在这种情况下，要使 id 唯一，您只需将元素的 id 添加到 id 属性的末尾即可。例如，元素的 id 必须是 item1、item2 等。或者您可以使用类而不是 Id。

标签： javascript jquery

【解决方案1】：

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

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

【讨论】：

@naniraju 很高兴为您提供帮助

【解决方案2】：

首先，您必须拥有唯一的 ID。

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

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

【讨论】：