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&nbsp; var formid = $(this).attr("id");&nbsp; $("#" + 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>