Add a checkbox to a dialog in jQuery
<p>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?</p>

<pre><code>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);
                            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 nagivation
                                sfNavRefreshUntilParent();
                            }
                            else if($srcTabIndex==1)
                            {   //for search
                                sfSearchGridRefreshAll();
                            }
                        }
                        else
                        {                                                       
                            messageBox("Warning!", $content+" can not be deleted since they have child facets or terms. &lt;br/&gt;Please empty them first(Move the child facets and move all the terms).");
                            if($srcTabIndex==0)
                            {   // for nagivation (refresh and highlight the invalid fIds)
                                sfNavRefreshWithHighlightFIds($content);
                            }
                            else if($srcTabIndex==1)
                            {   //for search
                                sfSearchGridRefreshWithHighlightFIds($content);
                            }
                        }
                    }
                });
                return; 
            }
        }
    });

}
</code></pre>

<p><strong>HTML</strong></p>

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