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

Question

好的，所以当一个复选框处于活动状态并设法保持手风琴面板的过渡动画时，我必须禁用其他复选框，但是一旦我单击“YES”，我无法弄清楚如何切换面板复选框。 它的作用是当您单击“是”复选框时，您仍然需要单击第一个手风琴面板才能打开它。我正在寻找的是当我点击“是”复选框时，它应该切换面板。

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

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

			var acc = document.getElementsByClassName("accordion_main");
			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";
					} 
				}
			}
		});
	});
	$(".checkbx, .GrpChk").change(function() {
		this.checked ? $("." + this.className).not(this).prop("disabled", true):$("." + this.className).not(this).prop("disabled", false);
	});
</script>

button.accordion_1{
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

button.accordion_1.active, button.accordion:hover {
background-color: #ddd;
}

div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}

button.accordion_main{
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

button.accordion_main.active, button.accordion:hover {
background-color: #ddd;
}

div.panel_main{
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}

<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;">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div>
		<button class="accordion_1">Section 2</button>
		<div class="panel">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div>
		<button class="accordion_1">Section 3</button>
		<div class="panel">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div>
	</div>

再次，提前感谢大家，我已经为此工作了两天，非常感谢任何帮助！

Answer 1

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

var acc = document.getElementsByClassName("accordion");
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";
    }
  }
}

button.accordion, button.accordionn {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

button.accordion.active,
button.accordion:hover {
  background-color: #ddd;
}

div.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<div class="wrapper">
  <div class="box item1">
    <button class="accordion" style="align:right;"> TOTALLY RANDOM TEXT FOR TESTING
            <ul style="display:in-line;">
                <li>
                    <input type="checkbox" id="check1" />
                    <label for="check1">YES</label>
                </li>
                <li>
                    <input type="checkbox" id="check2" />
                    <label for="check2">NO</label>
                </li>
            </ul>
        </button>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <button class="accordionn">Section 2</button>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <button class="accordionn">Section 3</button>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>

Answer 2

我明白了，伙计们！ 供参考，这是我尝试做的。

<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>

我没有对其他 2 个面板使用相同的过渡效果，而是使用了这个

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

如果你注意到我删除了 div.panel 的 CSS。 tat 是我的主要错误，我的 css 是 js 的冲突。谢谢大家！