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