在 ASP.NET 中选中复选框时，如何显示弹出窗体？

Question

I have a problem for showing popup form when the checkbox is already checked. I think I might need a script for this case. Please help me to solve this.

<asp:checkbox id="additem" class="additem" runat="server"/>
                                           
<asp:Content ID="Content3" ContentPlaceHolderID="chpPopUp" runat="server">
    <asp:Panel ID="pnlPopup" runat="server" Style="display: none;Width:80%;max-width:100%; ">
        <asp:Button Style="display: none" ID="btnShowPopup" runat="server"></asp:Button>
        <cc2:ModalPopupExtender ID="mdlPopup" runat="server" BehaviorID="mdlPopup" PopupControlID="pnlPopup"
            TargetControlID="btnShowPopup" BackgroundCssClass="modalBackground">
        </cc2:ModalPopupExtender>
        <cc2:DragPanelExtender ID="dpePopup" runat="server" TargetControlID="pnlPopup" DragHandleID="pnlPopupHeader" />
        <div class="modal-content" style="Width:80%;max-width:100%;">
            <asp:Panel ID="pnlPopupHeader" runat="server" BorderColor="Black">
                <div>
                    <!-- Modal content-->
                    <div class="modal-header">
                       ........
                    </div>
                </div>
            </asp:Panel>
            <asp:UpdatePanel ID="upnDetail" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <!-- class="modal-dialog"-->
                    <div>
                        <!-- Modal content-->
                        <div class="modal-body">

                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </asp:Panel>
</asp:Content>

I tried using the following script but it didn't work.

$('.additem').click(function () {
    var checked = $(this).is(':checked');
     if (checked) {
        document.getElementById("additem").value = "Yes";
       if (!confirm('Are you sure you want to mark this order as received?')) {
         $(this).removeAttr('checked');
         }
     }
     else {
     document.getElementById("additem").value = "No";
      if (!confirm('Are you sure you want to mark this order as  not received?')) {
         $(this).removeAttr('checked');
      }
     }
   });

Answer 1

<asp:checkbox id="additem" class="additem" runat="server"/>

should be put inside

<asp:Content ....></asp:Content>

and you could Press F12 to check how it was rendered when you debug, and you could try with return false to keep the statue of the checkbox, in my case, I tried as below:

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<asp:checkbox ID="additem" class="additem" runat="server"/>

<script>
$('.additem').children("input[type='checkbox']").click(function () {
    var checked = $(this).is(':checked');
    if (checked) {
      
        if (!confirm('Are you sure you want to mark this order as received?')) {
            return false
        }
    }
    else {
       
        if (!confirm('Are you sure you want to mark this order as  not received?')) {
            return false
        }
    }
});
</script>

The result:

The id/class attribute of the checkbox was not the same with what you set in the <asp:checkbox> tag.

After I modified the jQuery code, it works well: