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

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

你可以试试这个:

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