Javascript 如何使用复选框并仅使用该复选框切换手风琴菜单？

好的，所以当一个复选框处于活动状态时，我必须禁用另一个复选框，并设法为我的手风琴面板保留过渡动画，但是一旦单击“是”复选框，我就不知道如何切换面板。 当你点击“是”复选框时，你仍然需要点击第一个手风琴面板来打开它。我想要的是，当我点击“是”复选框时，它会切换面板

到目前为止，这是我得到的

var acc=document.getElementsByClassName（“accordion_1”）；
var i；
对于（i=0；i

button.accordion\u 1{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
按钮。手风琴1。激活，按钮。手风琴：悬停{
背景色：#ddd；
}
分区小组{
填充：0 18px；
背景色：白色；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}
手风琴主按钮{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
button.accordion\u main.active，按钮。accordion:悬停{
背景色：#ddd；
}
主配电盘分区{
填充：0 18px；
背景色：白色；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}

用于测试的完全随机文本

对
不

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

第二节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

第三节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

为与第2节和第3节按钮相关的类指定一个不同的名称

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

button.accordion，button.accordion{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
按钮。手风琴。激活，
按钮。手风琴：悬停{
背景色：#ddd；
}
分区小组{
填充：0 18px；
背景色：白色；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}

用于测试的完全随机文本


对


不


知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

第二节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

第三节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

为与第2节和第3节按钮相关的类指定一个不同的名称

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

button.accordion，button.accordion{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
<div class="box item1">
            <button class="accordion_main" id="check_holder"> TOTALLY RANDOM TEXT FOR TESTING
                <div class="check_box"> 
                    <span>
                        <form name="aForm" action="">
                            <p>
                            <label>
                                <!--<input type="checkbox" name="check" id="check" value="1"> YES-->
                                <input class="checkbx" id="check_main" name="Role" type="checkbox" value="yes"/>YES
                            </label>
                            <label>
                                <input class="checkbx" name="Role" type="checkbox" value="no"/> NO
                            </label>
                            </p>
                        </form>
                    </span>
                </div>
            </button> 
            <div  class="panel_main" id="panel_main" style="display:none;text-align:center;">
                <div class="wrapper_acc">
                    <div class="box_acc a_acc">A</div>
                    <div class="box_acc b_acc">B</div>
                    <div class="box_acc c_acc">C</div>
                    <div class="box_acc d_acc">D</div>
                    <div class="box_acc e_acc">E</div>
                    <div class="box_acc f_acc">F</div>
                </div>
            </div>

<script>
        var acc = document.getElementsByClassName("accordion_1");
        var i;

        for (i = 0; i < acc.length; i++) {
          acc[i].onclick = function() {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.maxHeight){
              panel.style.maxHeight = null;
            } else {
              panel.style.maxHeight = panel.scrollHeight + "px";
            } 
          }
        }

        $(document).ready(function() {
            $('#check_main').change(function() {
                $('#panel_main').toggle("fast","linear");

            });
        });
        $(".checkbx, .GrpChk").change(function() {
            this.checked ? $("." + this.className).not(this).prop("disabled", true):$("." + this.className).not(this).prop("disabled", false);
        });
    </script>

$('#panel_main').toggle("fast","linear");