JQuery and select all checkboxes

  • Resolved dhumeurvegetale

    (@dhumeurvegetale)


    1 year, 2 months ago

    Hi everyboby. I ‘ve got a problem with JQuery and a select all checkboxes function .

    The function work well only if i insert a script tag with JQuery library in the page. but the JQuery file is already inserted in the HEAD tag with an ID id=”jquery-core-js”.

    <script src='https://
.../js/jquery/jquery.min.js?ver=3.6.1' id=jquery-core-js></script>
<script src='https://.../js/jquery/jquery-migrate.min.js?ver=3.3.2' id=jquery-migrate-js></script>

    Is there something wrong in my function ? Why do I have to insert the library twice?

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#fld_4720906_1_opt1999183').on('click',function(){
        if(this.checked){
            $('.fld_6260799_1').each(function(){
                this.checked = true;
            });
        }else{
             $('.fld_6260799_1').each(function(){
                this.checked = false;
            });
        }
    });
    
    $('.fld_6260799_1').on('click',function(){
        if($('.fld_6260799_1:checked').length == $('.fld_6260799_1').length){
            $('#fld_4720906_1_opt1999183').prop('checked',true);
        }else{
            $('#fld_4720906_1_opt1999183').prop('checked',false);
        }
    });
});
</script>

    Can somebody explain me what’s wrong here… Thanks.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    1 year, 2 months ago

    Howdy!

    How are you loading your custom jquery to the front end? Are you enqueuing that or is that coded on a template file? From just a quick look the core-js jQuery being used is version 3.6.1 and the one you are loading externally is 3.6.3 though don’t think that would be a huge thing.

    Thread Starter dhumeurvegetale

    (@dhumeurvegetale)

    1 year, 2 months ago

    Hi Jose. the script in the HEAD is loaded by WP and the one from googleapi is added manually. I don’t think it’s a version problem, because before that i try a script to check if JQuery is loaded and it is….

    In my form i freeze the submit and reset button till a checkbox is checked and it work only after i add manually the JQuery googleapi script tag.

    does it have something to do with the ID JQuery script tag ?

    thanks to answer me, anyway

    Thread Starter dhumeurvegetale

    (@dhumeurvegetale)

    1 year, 2 months ago

    Sorry Jose, I’m a beginner, what do you mean by enqueuing ?

    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    1 year, 2 months ago

    Are you using a plugin or is this on a theme’s file?

    If you aren’t familiar with that you might be able to follow a guide like this one: https://kinsta.com/blog/wp-enqueue-scripts/

    The other thing that sort of comes to mind would be using the $ on that script. This one might give you some idea as to why: https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

    Let us know if that helps

    Thread Starter dhumeurvegetale

    (@dhumeurvegetale)

    1 year, 2 months ago

    Hi Jose. I just read the tuto on kinsta about enqueuing, but it’s a page in my theme (SKROLLEX) not a plugin ,very interesting anyway, thanks.

    For the JQuery instead of $, i’ve switch it, if it’s the way to write it in WP i will do it every time same if for me it doesn’t work without the googleapi script .

    But with the googleapi JQuery script only the $ work….

    I’ve got an asset pluging but unloaded on this page.

    This week i will check in my theme files how is it working, maybe i can’t find something about.

    Thread Starter dhumeurvegetale

    (@dhumeurvegetale)

    1 year, 2 months ago

    Me again…

    I found a script to verify if JQuery library is loaded on my page , and it said JQuery is loaded (Yeah !)….So i deleted the google api JQuery script to see if my Select All function works, no way !!!!!!

    window.onload = function() {
    if (window.jQuery) {  
        // jQuery is loaded  
        alert("Yeah!");
    } else {
        // jQuery is not loaded
        alert("Doesn't Work");
    }
}
    Thread Starter dhumeurvegetale

    (@dhumeurvegetale)

    1 year, 2 months ago

    ALLELUIA , ALLELUIA Jose !!!!!!

    It works now , I had to replace all the $ in my function to work without adding the googleapi JQuery script, i changed only the first $ in my first try, it’s why it didn’t worked….

    Now my function is:

    jQuery(document).ready(function(){
    jQuery('#fld_4720906_1_opt1999183').on('click',function(){
        if(this.checked){
            jQuery('.fld_6260799_1').each(function(){
                this.checked = true;
            });
        }else{
             jQuery('.fld_6260799_1').each(function(){
                this.checked = false;
            });
        }
    });
    
    jQuery('.fld_6260799_1').on('click',function(){
        if(jQuery('.fld_6260799_1:checked').length == jQuery('.fld_6260799_1').length){
            jQuery('#fld_4720906_1_opt1999183').prop('checked',true);
        }else{
            jQuery('#fld_4720906_1_opt1999183').prop('checked',false);
        }
    });
});

    PHEW, PHEW, PHEW, it took me days and hours to find the solution and i will still searching without your help, thank you very much my friend……

    It’s a ROOKIE mistake ………

    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    1 year, 2 months ago

    Oh, that’s great to hear! Yeah, I’ve done something similar with jQuery too

    Thread Starter dhumeurvegetale

    (@dhumeurvegetale)

    1 year, 2 months ago

    Thanks my friend. I’ve got a lot to read before coding in WP……

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘JQuery and select all checkboxes’ is closed to new replies.