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

Question

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

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

Answer 1

你可以试试这个：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

.hidden {
  display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;