javascript - 如果勾选复选框，如何显示每个表行的 div？

Question

我正在尝试找出最佳方法，使生成的每行当前隐藏的 div 仅在选中该框时显示(这些是第二方姓名、第二方姓氏和手机号码)

我尝试过的:

我最初尝试将它们分成单独的行，但我无法使其工作，因为尝试将复选框绑定(bind)到唯一 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

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

理想情况下，处理程序应该像这样绑定(bind):

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

我将函数绑定(bind)到容器，而不是为每个复选框绑定(bind)函数。这也适用于容器内动态生成的复选框。