dropdownlist not getting hidden using AsyncpostbackTrigger of UpdatePanel

dropdownlist not getting hidden using AsyncpostbackTrigger of UpdatePanel

There is one DropdownList outside the update panel. The update
Panel:UpdatePanel1 contains a checkbox.
What is required is that when users select the check box, the dropdownlist
should get hidden in an asynchronous manner ( with out any postback ).
With the below setup, when I use the PostBackTrigger , then dropdownlist
gets hidden on checking the checkbox. However, with AsyncPostBackTrigger
it doesn't gets hidden at all. The Check box code behind event does gets
called by the way in both cases.
Why Dropdownlist is not getting hidden when using: AsyncPostBackTrigger ?
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:DropDownList runat="server" ID="ddlCountries"></asp:DropDownList>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:RadioButton ID="radioSelectCountries" Text="Hide Countries"
runat="server"
OnCheckedChanged="radioSelectCountries_CheckedChanged"
AutoPostBack="true" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="radioSelectCountries"
EventName="CheckedChanged" />
</Triggers>
</asp:UpdatePanel>
Code Behind::
protected void radioSelectCountries_CheckedChanged(object sender,
EventArgs e)
{
if (radioSelectCountries.Checked == true)
ddlCountries.Visible = false;
else
ddlCountries.Visible = true;
}