在表格中选中复选框时显示相应的文本框答案

【问题标题】：Display respective text box when checkbox is checked in a table在表格中选中复选框时显示相应的文本框
【发布时间】：2017-08-07 10:57:16
【问题描述】：

在表单内的表格中选中复选框时显示相应的文本框。这些行将根据从服务器发送的数据以及数据动态生成。选中复选框时，应显示该行的文本框，否则应隐藏

<div class="container-fluid">
        <form class="available-products-table">
    <table class="table">
        <fieldset>
        <legend>Avaliable Products</legend>
            <thead>
                <tr>
                  <th>S.no</th>
                  <th>Product Name</th>
                  <th>Quanity</th>
                  <th>Brand</th>
                  <th>Color</th>
                  <th>Status</th>
                  <th>Quanity</th>
                </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Shoes</td>
                <td>50</td>
                <td>adidas</td>
                <td>Black</td>
                <td><input type="checkbox" name="product-status" id="product-status"/></td>
                <td><input type="text" name="send-quality" id="send-quality"/></td>
              </tr>
              <tr>
                <td>1</td>
                <td>Shoes</td>
                <td>50</td>
                <td>adidas</td>
                <td>Black</td>
                <td><input type="checkbox" name="product-status" id="product-status"/></td>
                <td><input type="text" name="send-quality" id="send-quality"/></td>
              </tr>
              <tr>
                <td>1</td>
                <td>Shoes</td>
                <td>50</td>
                <td>adidas</td>
                <td>Black</td>
                <td><input type="checkbox" name="product-status" id="product-status"/></td>
                <td><input type="text" name="send-quality" id="send-quality"/></td>
              </tr>
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>Enter Franchise ID</td>
                <td><input type="text" name="send-franchise-is" id="product-status" required/></td>
                <td><input type="submit" name="submit" value="submit" class="btn btn-primary/"></td>
              </tr>
            </tbody>
        </fieldset>
    </table>
    </form>
    </div>

【问题讨论】：

到目前为止您尝试过什么，遇到了什么问题？没有人会给出你现成的代码！

标签： javascript jquery css

【解决方案1】：

你可以试试这个：

$(".table input[name='product-status']").change(function(){
    if($(this).is(":checked")){
      $(this).parents("tr:eq(0)").find("input[name='send-quality']").show();
    }
    else{
      $(this).parents("tr:eq(0)").find("input[name='send-quality']").hide();
    }
});

input[name='send-quality']
{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
        <form class="available-products-table">
    <table class="table">
        <fieldset>
        <legend>Avaliable Products</legend>
            <thead>
                <tr>
                  <th>S.no</th>
                  <th>Product Name</th>
                  <th>Quanity</th>
                  <th>Brand</th>
                  <th>Color</th>
                  <th>Status</th>
                  <th>Quanity</th>
                </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Shoes</td>
                <td>50</td>
                <td>adidas</td>
                <td>Black</td>
                <td><input type="checkbox" name="product-status" id="product-status"></td>
                <td><input type="text" name="send-quality" id="send-quality"</td>
              </tr>
              <tr>
                <td>1</td>
                <td>Shoes</td>
                <td>50</td>
                <td>adidas</td>
                <td>Black</td>
                <td><input type="checkbox" name="product-status" id="product-status"></td>
                <td><input type="text" name="send-quality" id="send-quality"></td>
              </tr>
              <tr>
                <td>1</td>
                <td>Shoes</td>
                <td>50</td>
                <td>adidas</td>
                <td>Black</td>
                <td><input type="checkbox" name="product-status" id="product-status"></td>
                <td><input type="text" name="send-quality" id="send-quality"></td>
              </tr>
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>Enter Franchise ID</td>
                <td><input type="text" name="send-franchise-is" id="product-status" required></td>
                <td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>

              </tr>
            </tbody>
        </fieldset>
    </table>
    </form>
    </div>

【讨论】：

【解决方案2】：

使用$(this).is(":checked")，查看复选框是否被选中。如果选中，则显示相关输入框。我为这个演示的每个输入框添加了一个类hidden：

$('input[type=checkbox]').on('click', function() {
  if ($(this).is(":checked"))
    $(this).parents("tr:first").find('.hidden').show();
  else
    $(this).parents("tr:first").find('.hidden').hide();
})

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <form class="available-products-table">
    <table class="table">
      <fieldset>
        <legend>Avaliable Products</legend>
        <thead>
          <tr>
            <th>S.no</th>
            <th>Product Name</th>
            <th>Quanity</th>
            <th>Brand</th>
            <th>Color</th>
            <th>Status</th>
            <th>Quanity</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Shoes</td>
            <td>50</td>
            <td>adidas</td>
            <td>Black</td>
            <td><input type="checkbox" name="product-status" id="product-status"></td>
            <td><input type="text" class='hidden' name="send-quality" id="send-quality" /> </td>
          </tr>
          <tr>
            <td>1</td>
            <td>Shoes</td>
            <td>50</td>
            <td>adidas</td>
            <td>Black</td>
            <td><input type="checkbox" name="product-status" id="product-status"></td>
            <td><input type="text" class='hidden' name="send-quality" id="send-quality"></td>
          </tr>
          <tr>
            <td>1</td>
            <td>Shoes</td>
            <td>50</td>
            <td>adidas</td>
            <td>Black</td>
            <td><input type="checkbox" name="product-status" id="product-status"></td>
            <td><input type="text" class='hidden' name="send-quality" id="send-quality"></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>Enter Franchise ID</td>
            <td><input type="text" name="send-franchise-is" id="product-status" required></td>
            <td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>

          </tr>
        </tbody>
      </fieldset>
    </table>
  </form>
</div>

【讨论】：