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

我想在选中复选框时显示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>';

echo'
'.
$item。”
';

这是需要切换的框架

foreach( $checkboxitemsafterstripper as $key => $item ){
echo '
<div id="'.$item.'form">';
}

foreach（$checkboxitemsafterstripper作为$key=>$item）{
回声'
';
}

我不确定您为什么要使用

$（“#“+formid+”）。单击（function（）{..

无需使用此简单获取复选框的id并切换div

演示代码：

$（“div[id$=form]”。hide（）//隐藏id以form结尾的所有div
$（'.frameopener'）。在（'change'，function（）{//在状态更改时
var formid=$（this.attr（“id”）；
$（“#”+formid+“form”）.toggle（）；
})；

12
13
14
12分区
13分区
14 div

非常感谢swathi。这就是我要找的。你纠正了我，非常感谢