Add a checkbox to a dialog in jQuery

I am totally new to jQuery and JavaScript and I have to modify some code. I need to add a checkbox to this dialog and take a decision based on the choice. Any suggestions?

function deleteFacets()
{
    //  button click
    $("#b_facetsDelete").button().click(function(){
        // selected fIds
        var $fIds=checkSfALOneSelectedFId();
        if(!$fIds)
        {
            return;
        }
        $('#deleteFacetsDialog').dialog('open');        
        return;

    });

    // dialog
    $("#deleteFacetsDialog").dialog({
        autoOpen: false,
        resizable: false,
        height:160,
        modal: true,
        buttons: {
            "Cancel": function() {
                $(this).dialog('close');
            },
            "Delete selected facets": function() {
                $(this).dialog('close');

                // get the selected fIds
                var $fIds=getSfSelectedFIds();

                //update database
                $.ajax({
                    url: 'ajax/ajax_facetsDelete.php',
                    type: 'POST',
                    data: {"fIds":$fIds},
                    async: false,
                    dataType: 'xml',
                    error: function(){
                        alert('Error loading XML document');
                    },
                    success: function(data){
                        //check error
                        var $error=$(data).find('error').text();
                        if($error!="0")
                        {
                            messageBox("Error",$error);
             开发者_如何学C               return;
                        }
                        //content
                        var $content=$(data).find('content').text();
                        //refresh source facets tab
                        var $srcTabIndex=$("#srcFacetsTab").tabs('option', 'selected');
                        if($content=="0")
                        {
                            messageBox("Succeed!","Delete successfully!");
                            if($srcTabIndex==0)
                            {   // for navigation
                                sfNavRefreshUntilParent();
                            }
                            else if($srcTabIndex==1)
                            {   //for search
                                sfSearchGridRefreshAll();
                            }
                        }
                        else
                        {                                                       
                            messageBox("Warning!", $content+" can not be deleted since they have child facets or terms. <br/>Please empty them first(Move the child facets and move all the terms).");
                            if($srcTabIndex==0)
                            {   // for navigation (refresh and highlight the invalid fIds)
                                sfNavRefreshWithHighlightFIds($content);
                            }
                            else if($srcTabIndex==1)
                            {   //for search
                                sfSearchGridRefreshWithHighlightFIds($content);
                            }
                        }
                    }
                });
                return; 
            }
        }
    });

}

HTML

<!-- delete facets confirmation dialog -->
<div id="deleteFacetsDialog" title="Sure to delete?">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These facets will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

The ID that you're calling .dialog on, deleteFacetsDialog, is where all the code for the body of the dialog exists. So what you need to do is find that ID in the HTML source and add a checkbox within it (and whatever text / label you need surrounding it).

Then in your delete function callback you can access that checkbox, look up it's value, and do whatever if/else logic you need based on their selection. For example:

<div id="deleteFacetsDialog">
...
<label><input type="checkbox" id="permaDelete" />Perminantly delete this facet?</label>
...
</div>

And:

...
"Delete selected facets": function() {
    ...
    if ($('#permaDelete').is(':checked')) {

    } else {

    }
    ...
}

Just make sure the ID you use in the HTML for the input lines up with what you call in JS.