如何在WordPress小部件插件中修复jquery点击事件

Question

我正在创建单词小部件插件...我的小部件中有 4 个复选框...当我单击第一个复选框时，它将隐藏其他 3 个复选框。问题是 jQuery 的点击事件不起作用。控制台中也没有错误。当我在WordPress管理中单击"启用辅助功能模式"时，单击事件工作正常...如何解决这个问题？

这是PHP插件代码：

function include_jscript() {
    wp_enqueue_script('myscript', plugins_url('js/script.js',__FILE__ ),array('jquery'));
}
add_action( 'admin_enqueue_scripts', 'include_jscript' );

这是jquery代码：

jQuery(document).ready(function($){ 
$('#chk_site').on('click',function(){
        if($(this).prop("checked") == true)
            $("#chkboxes").hide();
        else
            $("#chkboxes").show();
    }); 
});

<div class="widget-content">	<br><label style="display:block;margin-bottom:6px;"><input type="checkbox" id="chk_site" class="widget-zsearch-2-chk_site" name="widget-zsearch[2][chk_site]" value="">Display post type on site</label><div id="chkboxes"><label style="display:block;margin-bottom:6px;"><input type="checkbox" id="chk_post" class="widget-zsearch-2-post" name="widget-zsearch[2][chk_post]" value="post">Search in Posts</label><label style="display:block;margin-bottom:6px;"><input type="checkbox" id="chk_page" class="widget-zsearch-2-page" name="widget-zsearch[2][chk_page]" value="page">Search in Pages</label><label style="display:block;margin-bottom:6px;"><input type="checkbox" id="chk_attachment" class="widget-zsearch-2-attachment" name="widget-zsearch[2][chk_attachment]" value="attachment">Search in Attachments</label><br></div>	</div>

Answer 1

代码中存在一些语法错误。例如，这是 js if/else 语句if(argument){}else{}的正确语法。这是一个可行的解决方案，

$(function(){
  $('.chkboxes').on('click', function() {
    if ($(this).is(":checked")){
      $(this).removeClass('chkboxes');
      $(".chkboxes").hide();
      }
    else{
      $(this).show();
      }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<input class='chkboxes'  type="checkbox"/>
<input class="chkboxes"  type="checkbox"/>
<input class="chkboxes"  type="checkbox"/>
<p> click any box to hide the others </p>