Javascript 选中复选框时隐藏表中的记录

我正试图根据复选框的选中状态隐藏/显示表中的记录

HTML

因此，当选中复选框时，应该隐藏/显示包含记录的相应

我发现了这种讨论

---

但是找不到我的场景的工作示例。

希望您能从这里找到解决方案

$（文档）.ready（函数（）{
$（'input[type=“checkbox”]”）。单击（函数（）{
var inputValue=$（this.attr（“值”）；
$（“+inputValue）.toggle（）；
});
});
.box{
颜色：#fff；
填充：20px；
显示：无；
边缘顶部：20px；
}
.red{背景：#ff0000；}
.green{背景：#228B22；}
.blue{背景：#0000ff；}
标签{右边距：15px；}

红色
绿色
蓝色
您选择了红色复选框，所以我在这里
您已选中绿色复选框，因此我在这里
您选择了蓝色复选框，因此我在这里
这甚至不是有效的HTML。。。你不能把一个
div
放在这个地方的一张表中。使用分而治之：将问题分成最小的子问题，然后分别处理每个子问题。所有必需的信息在SO和MDN中以及其他地方都有。@CBroe否则我如何识别要显示/隐藏的代码段？@kurthetic您只需将id放在上，然后将row@BenLonsdale因为有多行我想隐藏一个复选框，这显然是行不通的
    <label>Add Additional Once off</label>
    <input type="checkbox" id="chkAdditionalOnceoff" onChange="display();"value="0"><br>
    <label>Add Additional Monthly</label>
    <input type="checkbox" id="chkAdditionalMonthly" onChange="display();"value="0">
    <table>
    <div id="AdditionalOnceoff" style="display:none">
    <tr><td><input type="text" id="txtField1"></td>
        <td><input type="text" id="txtField2"></td>
    </tr>
    </div>
    <tr><td colspan="2">Normal Record to Display always</td></tr>
    <div id="AdditionalMonthly" style="display:none">
    <tr>
        <td><input type="text" id="txtField3"></td>
        <td><input type="text" id="txtField4"></td>
    </tr>
    </div>
    </table>

function display(){
  if (document.getElementById("chkAdditionalOnceoff").checked) {
   document.getElementById("AdditionalOnceoff").style.display = "inline";
  } else {
   document.getElementById("AdditionalOnceoff").style.display = "none";
  }
   if (document.getElementById("chkAdditionalMonthly").checked) {
   document.getElementById("AdditionalMonthly").style.display = "inline";
  } else {
   document.getElementById("AdditionalMonthly").style.display = "none";
  }
}