如果選中復選框，如何顯示每個表格行的div？

Question

我試圖找出最好的方法來生成每行生成的當前隱藏的div只顯示框是否勾選（這些是第二方名稱，第二方姓氏和手機號碼）

我嘗試過的：

我已經嘗試過將它們拆分成單獨的行，但是我無法讓它工作，因為嘗試將盒子檢查綁定到唯一的ID證明是困難的，因為它們是自動生成的。

我也試過了

if ($('input.checkboxAC').prop('checked')) {
          removeAttr( 'hidetopline' );

（hidetopline是div的名稱，但我正試圖弄清楚如何單獨進行，我想刪除顯示風格：沒有可行）

我正在使用的是：bootstrap，jquery

jQuery的

  function displayResult()
  {
      document.getElementById("tableAc").insertRow(-1).innerHTML = '<td class="style1" style="border-color: #FFFFFF"><input type="text" style="width: 150px"/><div class="divhidden" style="display:none"><i><br />2nd Party First Name<i/><br /><input type="text" style="width: 150px" /></div></td><td class="style1" style="border-color: #FFFFFF"><input type="text" style="width: 150px"/><div class="divhidden" style="display:none"><i><br />2nd Party Surname<i/><br /><input type="text" style="width: 150px" /></div></td><td class="style1" style="border-color: #FFFFFF"><input type="text" style="width: 150px"/><div class="divhidden" style="display:none"><i><br />Mobile<i/><br /><input type="text" style="width: 150px" /></div><td class="style1" style="border-color: #FFFFFF"><input type="checkbox" style="width: 150px"/></td></td>';

  }

HTML

<h2>COA Table</h2>
  <table class="table" id="tableAc">
    <thead>
      <tr>
        <th class="style2">Product Type</th>
        <th class="style2">NSC</th>
        <th class="style2">Account Number</th>
        <th class="style2">Joint A/c</th>
      </tr>
    </thead>
    <tbody>
      <tr id="acRow" class="first">
        <td class="style1" style="border-color: #FFFFFF"><input type="text" style="width: 150px"/><div class="divhidden" ><i><br />2nd Party First Name<i/><br /><input type="text" style="width: 150px" /></div></td>
        <td class="style1" style="border-color: #FFFFFF"><input type="text" style="width: 150px"/><div class="divhidden" ><i><br />2nd Party First Name<i/><br /><input type="text" style="width: 150px" /></div></td>
        <td class="style1" style="border-color: #FFFFFF"><input type="text" style="width: 150px"/><div class="divhidden" ><i><br />2nd Party First Name<i/><br /><input type="text" style="width: 150px" /></div></td>
        <td class="style1" style="border-color: #FFFFFF"><input type="checkbox" style="width: 150px" class="checkboxAC"/></td>

      </tr>
    </tbody>
  </table>
          <button type="button" onclick="displayResult()">Add A/c</button>            

</div>

</body>
</html>

Answer 1

當你說你嘗試過：

if ($('input.checkboxAC').prop('checked')) {
    removeAttr( 'hidetopline' );

您可以嘗試將其替換為：

if ($('input.checkboxAC').prop('checked')) {
    $('#hidetopline')attr( 'display', 'block' );
} else {
    $('#hidetopline')attr( 'display', 'none' );
}

Answer 2

var checkboxfunction = function(){
    var $this = $(this); // this is the checkbox
    var $row = $this.closest("tr") //this is the row
    var $fields = $row.find(".divhidden") // these are the fields
    //if you can't add a class, just build a jQuery collection manually 
    //with the required fields

    //For debug purposes:
    //console.log("I've clicked the checkbox ", $this, " for the row: ", $row, " to ", $this.is(':checked')?"show":"hide", " these fields: ", $fields);

    if ($this.is(':checked')) {
      $fields.show();
    }else{
      $fields.hide();
    }
}

理想情況下，處理程序將被綁定為：

$("#tableAc").on("click", "input.checkboxAC", checkboxfunction);

我將函數綁定到容器，以便不為每個復選框綁定一個函數。 這也適用於容器內的dinamically生成的復選框。