در اینجا به بررسی نحوه ایجاد (Mutually exclusive CheckBoxList) یا CheckBox های متقابل دو به دو درون یک GridView در ASP.NET با استفاده از JavaScript و jQuery می پردازیم.

(Mutually exclusive CheckBoxList) یا CheckBox های متقابل دو به دو، یعنی زمانی که یک CheckBox انتحاب شد، تمام CheckBox های موجود دیگر در CheckBoxList از حالت انتخاب خارج شوند.

کدهای HTML :

کدهای HTML زیر حاوی یک GridView به همراه دو ستون BoundField و یک ستون TemplateField که حاوی یک کنترل ASP.Net CheckBoxList است می شود.

   <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound">
        <Columns>
            <asp:BoundField DataField="Name" HeaderText="نام" ItemStyle-Width="150" />
            <asp:BoundField DataField="Country" HeaderText="شهر" ItemStyle-Width="100" />
            <asp:TemplateField HeaderText="جنسیت" ItemStyle-Width="150">
                <ItemTemplate>
                    <asp:CheckBoxList ID="chkGender" runat="server" RepeatDirection="Horizontal">
                        <asp:ListItem Text="مرد" Value="M" />
                        <asp:ListItem Text="زن" Value="F" />
                    </asp:CheckBoxList>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

فضای نام:

در این پروژه ما نیازمند یک فضای نام مناسب برای ادامه کار هستیم. در زیر می توانید فضای نام مناسب با این پروژه را ببینید.

using System.Data;

دستورات مربوط به کنترل GridView:

در اینجا ما یک DataTable پویا (Dynamic) به همراه اطلاعات ساختگی ایجاد کرده ایم که برای کنترل GridView در رویداد Page Load مورد استفاده قرار می گیرد.

protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Id"), new DataColumn("Gender"), new DataColumn("Name"), new DataColumn("Country") });
            dt.Rows.Add(1, "F", "زهرا چگینی", "تهران");
            dt.Rows.Add(2, "M", "ایمان مدائنی", "اصفهان");
            dt.Rows.Add(3, "M", "سجاد باقرزاده", "شیراز");
            dt.Rows.Add(4, "F", "نرگس محمدی", "اراک");
            dt.Rows.Add(4, "M", "احسان حسینی", "همدان");
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
    }

نمایش مقادیر انتخاب شده ی CheckBoxList در GridView:

در کنار مدیریت رویداد OnRowDataBound در GridView، اولین مقدار جنسیت از شیء DataItem در GridView مشخص شده است.

در انتها CheckBoxList  با استفاده از متد FindControl به منبع اشاره میکند و مقادیر آن انتخاب می شود.

 protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            string gender = (e.Row.DataItem as DataRowView)["Gender"].ToString();
            CheckBoxList chkGender = (e.Row.FindControl("chkGender") as CheckBoxList);
            chkGender.Items.FindByValue(gender).Selected = true;
        }
    }

ابزار CheckBox های متقابل دو به دو در GridView:

در کنار مدیریت رویداد اسناد jQuery، یک مدیریت رویداد کلیک برای هر CheckBox که در لیست CheckBox  های موجود در GridView هستند قرار دارد.

زمانی که یک CheckBox در CheckBoxList انتخاب شد، تمام CheckBox های موجود از حالت انتخاب خارج می شوند.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=chkGender] input").click(function () {
                $(this).closest("table").find("input").not(this).removeAttr("checked");
            });
        });
    </script>

تصویر خروجی برنامه را می توانید در ادامه مشاهده نمایید.