Jquery 复选框仅在选中、取消选中然后再选中时切换

Question

我想在选中复选框时显示 div，并在取消选中复选框时隐藏 div。这是我尝试过的。它仅适用于选中和取消选中，然后再选中。我正在使用jquery 3.5.1。我认为这个jquery部分逻辑有问题jquery部分$('.frameopener').on('change', function(){ // on change of state   if(this.checked) // if changed state is "CHECKED"    {                  var formid=$(this).attr("id");        $("#"+formid+"").click(function() {     $("#" + formid + "form").toggle();    });}});从循环动态显示复选框的 php 部分echo '   <td>    <input type="checkbox" class="frameopener" id="'.$checkboxitemsafterstripper[$key].'" ></td><td>'.   $item.'  </td>';这是需要切换的框架foreach( $checkboxitemsafterstripper as $key => $item ){echo '<div id="'.$item.'form">';}

Answer 1

我不知道你为什么使用，$("#"+formid+"").click(function() {..没有必要使用这个，只需获取复选框的 id 和切换 div 。

演示代码：

$("div[id$=form]").hide() //hide all div whose id end with form

$('.frameopener').on('change', function() { // on change of state

  var formid = $(this).attr("id");

  $("#" + formid + "form").toggle();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" class="frameopener" id="12">12

<input type="checkbox" class="frameopener" id="13">13

<input type="checkbox" class="frameopener" id="14">14

<div id="12form">12 div</div>

<div id="13form">13 div</div>

<div id="14form">14 div</div>