Javascript 手风琴中的复选框

我正在尝试使用asp.net创建一个系统，我想使用手风琴

 -CONTENT

 -CONTENT

 -CONTENT

我希望我的手风琴有一个带有复选框的标题，一旦选中该复选框，它将在内容部分显示复选框，因此它将如下所示：

 -CONTENT

 -CONTENT

 -CONTENT

-标题

 -CONTENT

 -CONTENT

 -CONTENT

-标题

 -CONTENT

 -CONTENT

 -CONTENT

 -CONTENT

 -CONTENT

 -CONTENT

但是，显示的标题将取决于从另一个复选框中进行的选择，并且示例中的两个“标题”将位于同一个手风琴中。 有可能这样做吗？我还需要能够选择多个复选框，所以我不确定使用复选框还是复选框列表是最好的方法

 -CONTENT

 -CONTENT

 -CONTENT

对不起，如果我没有说清楚的话 如果你需要更多的信息，请告诉我

 -CONTENT

 -CONTENT

 -CONTENT

---

非常感谢

请尝试此html代码

 -CONTENT

 -CONTENT

 -CONTENT

<link href = "https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel = "stylesheet" />
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="accordion">
    <h3>
        <label for='product-44-44'>
            <input type='checkbox'  name="header" value="header" id="header"/>
            HEADER
        </label>
    </h3>
    <div class="columns">
        <div class="d1">
            <label>
                <input type="checkbox" name="content1" value="content1" id="content1">
                CONTENT 1
            </label>
        </div>
        <div class="d1">
            <label>
                <input type="checkbox" name="content2" value="content2" id="content2">
                CONTENT 2
            </label>
        </div>
    </div>
</div>
$("#accordion")
            .accordion({
                collapsible: true,
                active: false,
                heightStyle: "content",
                beforeActivate: function (event, ui) {
                    var oldInput = ui.oldHeader.find('input');
                    oldInput.prop('checked', !oldInput.prop('checked')) // this bit unchecks when the accordion is closed

                    var newInput = ui.newHeader.find('input'); // this bit checks when the accordion is opened
                    newInput.prop('checked', !newInput.prop('checked'))
                }
            });

标题
内容1
内容2
$（“手风琴”）
.手风琴({
可折叠的：是的，
活动：错误，
高度样式：“内容”，
beforeActivate:功能（事件、用户界面）{
var oldInput=ui.oldHeader.find（'input'）；
oldInput.prop（'checked'），！oldInput.prop（'checked'）//当手风琴关闭时，此位取消选中
var newInput=ui.newHeader.find（'input'）；//此位检查手风琴何时打开
newInput.prop（'checked'），！newInput.prop（'checked'））
}
});

尝试使用运行代码以单击此链接

---

如果您有两到三个级别的复选框，并且希望使用AJAX预生成或加载复选框，则有点难以理解。。。也许制作一个更现实的样本会让这更容易理解。我用一个树状视图对这个问题进行了分类：-）它做得足够接近我想要它做的

 -CONTENT

 -CONTENT

 -CONTENT