如果选中复选框，如何显示每个表格行的div？

Question

I am trying to figure out the best way to make the currently hidden divs of each line that is generated to only show if the box is ticked (these are 2nd party name, 2nd party surname and mobile number)

What I've tried:

I've tried initially having them split into seperate rows but I couldn't get that to work as trying to bind the box check to a unique ID is proving difficult because they are auto generated.

I've also tried

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

(hidetopline is the name of the div but I'm trying to figure how to do that individually, i thought removing the style of display:none could work)

What I'm using: 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

When you say you tried:

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

You could try replace that with:

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

the handler would ideally be bound like this:

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

I binded the function to the container to not bind a function for EVERY checkbox. This also works with dinamically generated checkboxes inside the container.