如何修复wordpress小部件插件中的jquery点击事件？

Question

I'm creating wordress widget plugin...there are 4 checkboxes in my widget...when i click on first check box that will hide other 3 checkboxes.the problem is jquery's click event that is not working. also there is no error in console. when i click "Enable accessibility mode" in wordpress admin then click event works fine...how do i fix that issue?

Here is PHP plugin code:

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

Here is jquery code:

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

There are some syntax errors in your code. For example, this is the correct syntax of a js if/else statement if(argument){}else{} . Here is a working solution,

 $(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>