How to uncheck checkbox on option select then load corresponding data from database and persist checkbox and option select state

I have a checkbox and a select option on my page that displays data from my database.

I want a situation where when a user checks the checkbox,then the word “All” will be displayed in the select option and all data displayed on table. Then when a user selects any option from the drop-down,the checkbox should be unchecked and the corresponding rows of data displayed as selected by user.

I’m still learning my way through with JavaScript and jQuery. I know its solution lies there but I don’t know just how to get about it. Below is what I’ve tried following similar cases but it hasn’t solved my problem.

My html for the check box and select

<input type="checkbox" name="check" id="check" onchange="this.form.submit();"/>Show All
<select id="rowno" name="rowno" onchange="this.form.submit();">
    <option value"10"<?php if(isset($_POST['rowno']) && $_POST['rowno']=="10") echo "selected";?>>10</option>
    <option value"20"<?php if(isset($_POST['rowno']) && $_POST['rowno']=="20") echo "selected";?>>20</option>
    <option value"30"<?php if(isset($_POST['rowno']) && $_POST['rowno']=="30") echo "selected";?>>30</option>
    <option value"40"<?php if(isset($_POST['rowno']) && $_POST['rowno']=="40") echo "selected";?>>40</option>
</select>

JavaScript
​x
 
<input type="checkbox" name="check" id="check" onchange="this.form.submit();"/>Show All<select id="rowno" name="rowno" onchange="this.form.submit();">    <option value"10"<?php if(isset($_POST['rowno']) && $_POST['rowno']=="10") echo "selected";?>>10</option>    <option value"20"<?php if(isset($_POST['rowno']) && $_POST['rowno']=="20") echo "selected";?>>20</option>    <option value"30"<?php if(isset($_POST['rowno']) && $_POST['rowno']=="30") echo "selected";?>>30</option>    <option value"40"<?php if(isset($_POST['rowno']) && $_POST['rowno']=="40") echo "selected";?>>40</option></select>​

Below is the jquery code:

<script type="text/javascript>
    

//js code to persist checkbox state using local storage
    function onClickBox()
    {
        let checked = $("#check").is(":checked");
        localStorage.setItem("checked", checked)
        
        if($("#check").is(":checked"))
        {
            //code to re-populate select on checkbox checked
                if(this.checked)
                {
                    var select = $("#rowno");
                    select.empty();

                    var options = "";
                    options += "<option hidden>All</option>";
                    options += "<option value = '10' >10</option>";
                    options += "<option value = '20' >20</option>";
                    options += "<option value = '30' >30</option>";
                    options += "<option value = '40' >40</option>";

                    select.html(options);
                }
                else
                {
                    var select = $("#rowno");
                    select.empty();

                    var options = "";
                    options += "<option value = '10' >10</option>";
                    options += "<option value = '20' >20</option>";
                    options += "<option value = '30' >30</option>";
                    options += "<option value = '40' >40</option>";

                    select.html(options);
                }

            return confirm('Are you sure you want to display all rows? For a large table, this might crash the browser.');
        }
    }
    function onReady()
    {
        let checked = "true" == localStorage.getItem("checked");
        $("#check").prop('checked', checked);
        $("#check").click(onClickBox);
    }
    $(document).ready(onReady);

    //code to uncheck checkbox when select option selected
    $("#rowno").change(function()
    {
        let selected = $("#rowno").is(":selected");
        localStorage.setItem("selected", selected);
        select = localStorage.getItem("selected");           
            if(select)
                {
                    $("#check").prop('checked', false);
                }
    });

</script>

JavaScript
 
<script type="text/javascript>    ​//js code to persist checkbox state using local storage    function onClickBox()    {        let checked = $("#check").is(":checked");        localStorage.setItem("checked", checked)                if($("#check").is(":checked"))        {            //code to re-populate select on checkbox checked                if(this.checked)                {                    var select = $("#rowno");                    select.empty();​                    var options = "";                    options += "<option hidden>All</option>";                    options += "<option value = '10' >10</option>";                    options += "<option value = '20' >20</option>";                    options += "<option value = '30' >30</option>";                    options += "<option value = '40' >40</option>";​                    select.html(options);                }                else                {                    var select = $("#rowno");                    select.empty();​                    var options = "";                    options += "<option value = '10' >10</option>";                    options += "<option value = '20' >20</option>";                    options += "<option value = '30' >30</option>";                    options += "<option value = '40' >40</option>";​                    select.html(options);                }​            return confirm('Are you sure you want to display all rows? For a large table, this might crash the browser.');        }    }    function onReady()    {        let checked = "true" == localStorage.getItem("checked");        $("#check").prop('checked', checked);        $("#check").click(onClickBox);    }    $(document).ready(onReady);​    //code to uncheck checkbox when select option selected    $("#rowno").change(function()    {        let selected = $("#rowno").is(":selected");        localStorage.setItem("selected", selected);        select = localStorage.getItem("selected");                       if(select)                {                    $("#check").prop('checked', false);                }    });​</script>​

Answer

Perhaps the following MIGHT help a little – though I notice you have added some Javascript which uses localStorage to maintain checkbox checked state seeminly which was not specified in the original code/question.

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
    </head>
    <body>
    
        <!-- the form should have a name for easy reference to it in javascript -->
        <form method='post' name='geronimo'>
            <input type='checkbox' name='check' value=1 />Show All
            <select name='rowno'>
                <option value='all' hidden disabled>All
                <option value='10'>10
                <option value='20'>20
                <option value='30'>30
                <option value='40'>40
            </select>
            
            <input type='submit' />
        </form>
        <?php
            /*
                This is ONLY to show what has been submitted
                by the form - for reference only... though you
                could query the database here.
            */
            if( !empty( $_POST ) ){
                printf('<pre>%s</pre>',print_r($_POST,true));
            }
        ?>
        <script>
        <?php
            /*
                Using PHP to create a javascript variable that can be used to
                add the `selected` attribte to the respective option is much
                cleaner and easier than potentially hundreds of inline PHP echo
                statements as per the original code. imho
            */
            printf("    /* Dynamic variable from POSTed data - OR Zero! */
            let rownum='%s';
            nn", !empty( $_POST['rowno'] ) ? $_POST['rowno'] : 0 );
        ?>
        
            let oForm=document.forms.geronimo;
            let oSel=oForm.rowno;
            let oChk=oForm.check;
            
            
            // find all options and if the POSTed value matches - add the selected attribute
            // establish initial display conditions following page load / form submission
            if( rownum ){
                if( rownum=='all' )oChk.checked=true;
                Array.from( oSel.querySelectorAll('option') ).some(option=>{
                    if( rownum==Number( option.value ) || rownum=='all' ){
                        option.selected=true;
                        return true;
                    }
                });
            }
            
            
            // listen for changes on the checkbox
            oChk.addEventListener('click',function(e){
                if( oSel.firstElementChild.value=='all' ){
                    oSel.firstElementChild.selected=this.checked;
                    oSel.firstElementChild.disabled=!this.checked;
                }
            });
            
            
            
            oSel.addEventListener('change',function(e){
                if( oChk.checked )oChk.checked=false;
                
                alert(
                    'The checking/unchecking of elements and selection of the hidden "All" ' +
                    'option are done. What is NOT done is the selection of records from the database.nn' +
                    'Currently the approach seems to be using regular form submissions rather than AJAX,n'+
                    'which is why once this dialog closes the form will be submitted...nnGood luck.'
                );
                
                oForm.submit();
            });
        </script>
    </body>
</html>

JavaScript
 
<!DOCTYPE html><html lang='en'>    <head>        <meta charset='utf-8' />        <title></title>    </head>    <body>            <!-- the form should have a name for easy reference to it in javascript -->        <form method='post' name='geronimo'>            <input type='checkbox' name='check' value=1 />Show All            <select name='rowno'>                <option value='all' hidden disabled>All                <option value='10'>10                <option value='20'>20                <option value='30'>30                <option value='40'>40            </select>                        <input type='submit' />        </form>        <?php            /*                This is ONLY to show what has been submitted                by the form - for reference only... though you                could query the database here.            */            if( !empty( $_POST ) ){                printf('<pre>%s</pre>',print_r($_POST,true));            }        ?>        <script>        <?php            /*                Using PHP to create a javascript variable that can be used to                add the `selected` attribte to the respective option is much                cleaner and easier than potentially hundreds of inline PHP echo                statements as per the original code. imho            */            printf("    /* Dynamic variable from POSTed data - OR Zero! */            let rownum='%s';            nn", !empty( $_POST['rowno'] ) ? $_POST['rowno'] : 0 );        ?>                    let oForm=document.forms.geronimo;            let oSel=oForm.rowno;            let oChk=oForm.check;                                    // find all options and if the POSTed value matches - add the selected attribute            // establish initial display conditions following page load / form submission            if( rownum ){                if( rownum=='all' )oChk.checked=true;                Array.from( oSel.querySelectorAll('option') ).some(option=>{                    if( rownum==Number( option.value ) || rownum=='all' ){                        option.selected=true;                        return true;                    }                });            }                                    // listen for changes on the checkbox            oChk.addEventListener('click',function(e){                if( oSel.firstElementChild.value=='all' ){                    oSel.firstElementChild.selected=this.checked;                    oSel.firstElementChild.disabled=!this.checked;                }            });                                                oSel.addEventListener('change',function(e){                if( oChk.checked )oChk.checked=false;                                alert(                    'The checking/unchecking of elements and selection of the hidden "All" ' +                    'option are done. What is NOT done is the selection of records from the database.nn' +                    'Currently the approach seems to be using regular form submissions rather than AJAX,n'+                    'which is why once this dialog closes the form will be submitted...nnGood luck.'                );                                oForm.submit();            });        </script>    </body></html>​

Notes on the identified portion of code

/*
    OK - we have `rownum` which is created by PHP and is based upon
    previous form submission ( in this version )
    
    `rownum` will either be an integer (10,20,30..etc ) as it's value
    comes from the dropdown or, if the checkbox is checked, the value
    will be "all"
    
    If the value is "all" we should ensure that the checkbox is ticked.
    
    
    Array.from will, in this case, convert a `nodelist` into an array - 
    which we want to do if we want to use certain native array methods, such
    as `forEach` or, in this case, `some`. There are others we could use - 
    Array.prototype.map for instance.
    
    According to MDN:
    "NodeList objects are collections of nodes, usually returned by properties 
    such as Node.childNodes and methods such as document.querySelectorAll()."
    
    So - using `querySelectorAll` we return a `static nodelist` which we convert
    to an array and then iterate through. The `some` method can be cancelled if
    some logic test evaluates as true within the loop. This is useful as it means 
    we do not need to process ALL nodes/array items. The logic test used here 
    simply tests whether or not the current array item value( which is the option.value )
    is the same as the rownum variable or "all" - if it is the logic test is true 
    so we can stop further processing and perform whatever operations we want to. 
    
    In this case we want to ensure that the respective option in the select menu is 
    set as "selected" and then we return true to cancel the `some` loop.
*/

if( rownum ){
    if( rownum=='all' )oChk.checked=true;
    Array.from( oSel.querySelectorAll('option') ).some(option=>{
        if( rownum==Number( option.value ) || rownum=='all' ){
            option.selected=true;
            return true;
        }
    });
}

JavaScript
 
/*    OK - we have `rownum` which is created by PHP and is based upon    previous form submission ( in this version )        `rownum` will either be an integer (10,20,30..etc ) as it's value    comes from the dropdown or, if the checkbox is checked, the value    will be "all"        If the value is "all" we should ensure that the checkbox is ticked.            Array.from will, in this case, convert a `nodelist` into an array -     which we want to do if we want to use certain native array methods, such    as `forEach` or, in this case, `some`. There are others we could use -     Array.prototype.map for instance.        According to MDN:    "NodeList objects are collections of nodes, usually returned by properties     such as Node.childNodes and methods such as document.querySelectorAll()."        So - using `querySelectorAll` we return a `static nodelist` which we convert    to an array and then iterate through. The `some` method can be cancelled if    some logic test evaluates as true within the loop. This is useful as it means     we do not need to process ALL nodes/array items. The logic test used here     simply tests whether or not the current array item value( which is the option.value )    is the same as the rownum variable or "all" - if it is the logic test is true     so we can stop further processing and perform whatever operations we want to.         In this case we want to ensure that the respective option in the select menu is     set as "selected" and then we return true to cancel the `some` loop.*/​if( rownum ){    if( rownum=='all' )oChk.checked=true;    Array.from( oSel.querySelectorAll('option') ).some(option=>{        if( rownum==Number( option.value ) || rownum=='all' ){            option.selected=true;            return true;        }    });}​

Advertisement

Answer