Apex command button action executes even if the onclick button returns false

Question

I have a situation where I need to open up a confirmation dialog as in the image, on the click of Save Update button.

The button needs to check the value of the checkbox, if checked,only then open the confirmation dialog.

To achieve this, I have added an onchange event to the field which sets a global JS script variable (checkfield)

The onclick event then checks the variable checkfield and opens up the dialog.

The button goes like this:

<apex:inputCheckbox id="investigation" onchange="checkCaseStatus('{!$Component.investigation}')" value="{!underInvestigation}" label="{!fieldMap2[field]}" style="float:left;width:10%">

<apex:commandButton value="Save Update" action="{!showEmailTemplate}" onclick="checkandSubmit()">

//JS function

<script>
var checkfield = true;
  function checkCaseStatus(check){
   checkfield =  document.getElementById(check).checked; debugger;
   }

 function checkandSubmit(){
    if(checkfield == true)// I am able to get the checkbox value, the dialog opens
        {
            if(!confirm('Are you sure?'))
            {
                //Cancel Action
                return false;// i am returning false on cancel , because i dont want to execute the apex action="{!showEmailTemplate}"
            } else {return true;}// I want to execute the action, hence true

        }

   }

But in both the cases(OK and Cancel) the apex action is executed.

Answer 1

I have refactored the onclick event, it solved the problem. thanks to all for your suggestions

onclick="if(checkfield == false && !confirm('Are you sure?')){return false;}"