當在表格中檢查複選框時顯示相應的文本框

當在表格中檢查複選框時顯示相應的文本框。這些行將根據從服務器發送的數據以及數據動態生成。當複選框被選中應顯示該行的文本框中，否則就應該被隱藏當在表格中檢查複選框時顯示相應的文本框

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

來源

2017-08-07 prasad

你已經嘗試什麼到現在爲止，你做了什麼樣的問題呢？沒有人會給你準備好的代碼！ – Rohit

你可以試試這個：

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

來源

2017-08-07 11:02:34

使用$(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>

來源

2017-08-07 11:04:09

當在表格中檢查複選框時顯示相應的文本框

回答

相關問題