How to get values of CheckBox those are Checked using jQuery Ajax in ASP.Net

Last Reply on Aug 01, 2017 07:11 AM By ivinraj25

Posted on Jul 28, 2017 06:46 AM

When i click the Select working days / hours Checkbox the list of days will be displayed. for example if i click the sunday checkbox check box the value entered in the checkbox should be call to javascript function. in case am not click the checkbox the value display should be Null.

https://jsfiddle.net/ivinraj/9z6ttkvo/2/

$(document).ready(function () {
    $("input#btnDocBusinesshours").click(function () { SaveDocBusinesshours(null) });
});

Call Ajax Function

        function callAjax(jparms) {
            $.ajax({
                type: "POST",
                url: jparms.url,
                data: jparms.data,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    if (jparms.action == "SaveDocBusinesshours")
                        SaveDocBusinesshours(response.d)

                },
                failure: function (response) { response.d; }
            });
        }

Save Ajax Function

        function SaveDocBusinesshours(response) {
            var values = $('input[type="checkbox"].single:checked').map(function () {
                return $(this).val();
            }).toArray();


            if (response == null) {
                callAjax({
                    url: pageUrl + '/SaveDocBusinesshours',
                    data: '{"Doctorid": "' + $("#<%=hdnDoctorId.ClientID %>").val() + '","WorkingDaysID" : "' + $("#<%=hdnBusiness.ClientID %>").val() + '","Sunday" : "' + $("#<%=ChkSUN.ClientID %>").val() + '","Monday" : "' + $("#<%=ChkMON.ClientID %>").val() + '","Thuesday" : "' + $("#<%=ChkTUE.ClientID %>").val() + '"}',
                    action: "SaveDocBusinesshours"
                });
                window.location.reload();
            }
            else {
                loading(false);
                if (response.AjxContactId != null) {
                    $('#<%=hdnBusiness.ClientID%>').val(response.AjxContactId);
                }
                msg(true, response.Message);
            }

        }

 

   [WebMethod]
    public static UserAjax SaveDocBusinesshours(string Doctorid, string WorkingDaysID, string Sunday, string Monday, string Thuesday)
    {
        UserAjax oUserAjax = new UserAjax();
        return oUserAjax;
    }

 

Posted on Jul 31, 2017 09:02 AM

Hi ivinraj25,

I have created a sample which full fill your requirement you need to modify the code according to your need.

Default.aspx

<div align="center">
    <div class="tg-formsection">
        <div class="tg-heading-border tg-small">
            <h3>
                Add Clinic Business Hours</h3>
        </div>
        <div class="row">
            <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
                <div class="tg-docschedule tg-haslayout">
                    <form class="form-docschedule">
                    <fieldset class="row">
                        <div class="col-sm-12 col-xs-12">
                            <div class="form-group">
                                <label>
                                    <h4>
                                        Business Hours:</h4>
                                </label>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <label>
                                    <input type="radio" id="fullhours" class="option-input radio" />
                                    <br />
                                    <span style="font-size: 20px;">24 hours x 7 days</span> &nbsp;&nbsp;&nbsp;&nbsp;<input
                                        type="radio" id="addweekhours" class="option-input radio" />
                                    <br />
                                    <span style="font-size: 20px">Select working days / hours</span>
                                </label>
                            </div>
                        </div>
                        <div id="showweekhours" style="display: none;">
                            <div class="selectedDayTiming">
                                <div class="col-sm-12 col-xs-12">
                                    <div class="form-group">
                                        <input id="ChkSUN" type="checkbox" value="1" runat="server" class="single sun option-input checkbox"
                                            name="days" />
                                        <br />
                                        <span class="sun" style="font-size: 20px;">Sunday</span>
                                    </div>
                                </div>
                                <div id="Sun" style="display: none;">
                                    <div class="col-md-5 col-sm-6 col-xs-12">
                                        <div class="form-group">
                                            <select id="ddlSunStart" runat="server" class="form-control">
                                                <option value="1:00">1:00</option>
                                                <option value="1:30">1:30</option>
                                                <option value="2:00">2:00</option>
                                                <option value="2:30">2:30</option>
                                                <option value="3:00">3:00</option>
                                                <option value="3:30">3:30</option>
                                                <option value="4:00">4:00</option>
                                                <option value="4:30">4:30</option>
                                                <option value="5:00">5:00</option>
                                                <option value="5:30">5:30</option>
                                                <option value="6:00">6:00</option>
                                                <option value="6:30">6:30</option>
                                                <option value="7:00">7:00</option>
                                                <option value="7:30">7:30</option>
                                                <option value="8:00">8:00</option>
                                                <option value="8:30">8:30</option>
                                                <option value="9:00">9:00</option>
                                                <option value="9:30">9:30</option>
                                                <option value="10:00">10:00</option>
                                                <option value="10:30">10:30</option>
                                                <option value="11:00">11:00</option>
                                                <option value="11:30">11:30</option>
                                                <option value="12:00">12:00</option>
                                                <option value="12:30">12:30</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-5 col-sm-6 col-xs-12">
                                        <select id="ddlSunEnd" runat="server" class="form-control">
                                            <option value="1:00">1:00</option>
                                            <option value="1:30">1:30</option>
                                            <option value="2:00">2:00</option>
                                            <option value="2:30">2:30</option>
                                            <option value="3:00">3:00</option>
                                            <option value="3:30">3:30</option>
                                            <option value="4:00">4:00</option>
                                            <option value="4:30">4:30</option>
                                            <option value="5:00">5:00</option>
                                            <option value="5:30">5:30</option>
                                            <option value="6:00">6:00</option>
                                            <option value="6:30">6:30</option>
                                            <option value="7:00">7:00</option>
                                            <option value="7:30">7:30</option>
                                            <option value="8:00">8:00</option>
                                            <option value="8:30">8:30</option>
                                            <option value="9:00">9:00</option>
                                            <option value="9:30">9:30</option>
                                            <option value="10:00">10:00</option>
                                            <option value="10:30">10:30</option>
                                            <option value="11:00">11:00</option>
                                            <option value="11:30">11:30</option>
                                            <option value="12:00">12:00</option>
                                            <option value="12:30">12:30</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="selectedDayTiming">
                                <div class="col-sm-12 col-xs-12">
                                    <div class="form-group">
                                        <input id="ChkMON" type="checkbox" value="1" runat="server" class="single mon option-input checkbox"
                                            name="days" />
                                        <br />
                                        <span class="mon" style="font-size: 20px;">Monday</span>
                                    </div>
                                </div>
                                <div id="Mon" style="display: none;">
                                    <div class="col-md-5 col-sm-6 col-xs-12">
                                        <div class="form-group">
                                            <select id="ddlMonStart" runat="server" class="form-control">
                                                <option value="1:00">1:00</option>
                                                <option value="1:30">1:30</option>
                                                <option value="2:00">2:00</option>
                                                <option value="2:30">2:30</option>
                                                <option value="3:00">3:00</option>
                                                <option value="3:30">3:30</option>
                                                <option value="4:00">4:00</option>
                                                <option value="4:30">4:30</option>
                                                <option value="5:00">5:00</option>
                                                <option value="5:30">5:30</option>
                                                <option value="6:00">6:00</option>
                                                <option value="6:30">6:30</option>
                                                <option value="7:00">7:00</option>
                                                <option value="7:30">7:30</option>
                                                <option value="8:00">8:00</option>
                                                <option value="8:30">8:30</option>
                                                <option value="9:00">9:00</option>
                                                <option value="9:30">9:30</option>
                                                <option value="10:00">10:00</option>
                                                <option value="10:30">10:30</option>
                                                <option value="11:00">11:00</option>
                                                <option value="11:30">11:30</option>
                                                <option value="12:00">12:00</option>
                                                <option value="12:30">12:30</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-5 col-sm-6 col-xs-12">
                                        <div class="form-group">
                                            <select id="ddlMonEnd" runat="server" class="form-control">
                                                <option value="1:00">1:00</option>
                                                <option value="1:30">1:30</option>
                                                <option value="2:00">2:00</option>
                                                <option value="2:30">2:30</option>
                                                <option value="3:00">3:00</option>
                                                <option value="3:30">3:30</option>
                                                <option value="4:00">4:00</option>
                                                <option value="4:30">4:30</option>
                                                <option value="5:00">5:00</option>
                                                <option value="5:30">5:30</option>
                                                <option value="6:00">6:00</option>
                                                <option value="6:30">6:30</option>
                                                <option value="7:00">7:00</option>
                                                <option value="7:30">7:30</option>
                                                <option value="8:00">8:00</option>
                                                <option value="8:30">8:30</option>
                                                <option value="9:00">9:00</option>
                                                <option value="9:30">9:30</option>
                                                <option value="10:00">10:00</option>
                                                <option value="10:30">10:30</option>
                                                <option value="11:00">11:00</option>
                                                <option value="11:30">11:30</option>
                                                <option value="12:00">12:00</option>
                                                <option value="12:30">12:30</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="selectedDayTiming">
                                <div class="col-sm-12 col-xs-12">
                                    <div class="form-group">
                                        <input id="ChkTUE" type="checkbox" value="2" runat="server" class="single tue option-input checkbox"
                                            name="days" />
                                        <br />
                                        <span class="tue" style="font-size: 20px;">Tuesday</span>
                                    </div>
                                </div>
                                <div id="Tue" style="display: none;">
                                    <div class="col-md-5 col-sm-6 col-xs-12">
                                        <div class="form-group">
                                            <select id="ddlTueStart" runat="server" class="form-control">
                                                <option value="1:00">1:00</option>
                                                <option value="1:30">1:30</option>
                                                <option value="2:00">2:00</option>
                                                <option value="2:30">2:30</option>
                                                <option value="3:00">3:00</option>
                                                <option value="3:30">3:30</option>
                                                <option value="4:00">4:00</option>
                                                <option value="4:30">4:30</option>
                                                <option value="5:00">5:00</option>
                                                <option value="5:30">5:30</option>
                                                <option value="6:00">6:00</option>
                                                <option value="6:30">6:30</option>
                                                <option value="7:00">7:00</option>
                                                <option value="7:30">7:30</option>
                                                <option value="8:00">8:00</option>
                                                <option value="8:30">8:30</option>
                                                <option value="9:00">9:00</option>
                                                <option value="9:30">9:30</option>
                                                <option value="10:00">10:00</option>
                                                <option value="10:30">10:30</option>
                                                <option value="11:00">11:00</option>
                                                <option value="11:30">11:30</option>
                                                <option value="12:00">12:00</option>
                                                <option value="12:30">12:30</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-5 col-sm-6 col-xs-12">
                                        <div class="form-group">
                                            <select id="ddlTueEnd" runat="server" class="form-control">
                                                <option value="1:00">1:00</option>
                                                <option value="1:30">1:30</option>
                                                <option value="2:00">2:00</option>
                                                <option value="2:30">2:30</option>
                                                <option value="3:00">3:00</option>
                                                <option value="3:30">3:30</option>
                                                <option value="4:00">4:00</option>
                                                <option value="4:30">4:30</option>
                                                <option value="5:00">5:00</option>
                                                <option value="5:30">5:30</option>
                                                <option value="6:00">6:00</option>
                                                <option value="6:30">6:30</option>
                                                <option value="7:00">7:00</option>
                                                <option value="7:30">7:30</option>
                                                <option value="8:00">8:00</option>
                                                <option value="8:30">8:30</option>
                                                <option value="9:00">9:00</option>
                                                <option value="9:30">9:30</option>
                                                <option value="10:00">10:00</option>
                                                <option value="10:30">10:30</option>
                                                <option value="11:00">11:00</option>
                                                <option value="11:30">11:30</option>
                                                <option value="12:00">12:00</option>
                                                <option value="12:30">12:30</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="selectedDayTiming">
                                <div class="col-sm-12 col-xs-12">
                                    <div class="form-group">
                                        <input id="ChkWED" type="checkbox" value="3" runat="server" class="single wed option-input checkbox"
                                            name="days" />
                                        <br />
                                        <span class="wed" style="font-size: 20px;">Wednesday</span>
                                    </div>
                                </div>
                                <div id="Wed" style="display: none;">
                                    <div class="col-md-5 col-sm-6 col-xs-12">
                                        <div class="form-group">
                                            <select id="ddlwedStart" runat="server" class="form-control">
                                                <option value="1:00">1:00</option>
                                                <option value="1:30">1:30</option>
                                                <option value="2:00">2:00</option>
                                                <option value="2:30">2:30</option>
                                                <option value="3:00">3:00</option>
                                                <option value="3:30">3:30</option>
                                                <option value="4:00">4:00</option>
                                                <option value="4:30">4:30</option>
                                                <option value="5:00">5:00</option>
                                                <option value="5:30">5:30</option>
                                                <option value="6:00">6:00</option>
                                                <option value="6:30">6:30</option>
                                                <option value="7:00">7:00</option>
                                                <option value="7:30">7:30</option>
                                                <option value="8:00">8:00</option>
                                                <option value="8:30">8:30</option>
                                                <option value="9:00">9:00</option>
                                                <option value="9:30">9:30</option>
                                                <option value="10:00">10:00</option>
                                                <option value="10:30">10:30</option>
                                                <option value="11:00">11:00</option>
                                                <option value="11:30">11:30</option>
                                                <option value="12:00">12:00</option>
                                                <option value="12:30">12:30</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-5 col-sm-6 col-xs-12">
                                        <div class="form-group">
                                            <select id="ddlwedEnd" runat="server" class="form-control">
                                                <option value="1:00">1:00</option>
                                                <option value="1:30">1:30</option>
                                                <option value="2:00">2:00</option>
                                                <option value="2:30">2:30</option>
                                                <option value="3:00">3:00</option>
                                                <option value="3:30">3:30</option>
                                                <option value="4:00">4:00</option>
                                                <option value="4:30">4:30</option>
                                                <option value="5:00">5:00</option>
                                                <option value="5:30">5:30</option>
                                                <option value="6:00">6:00</option>
                                                <option value="6:30">6:30</option>
                                                <option value="7:00">7:00</option>
                                                <option value="7:30">7:30</option>
                                                <option value="8:00">8:00</option>
                                                <option value="8:30">8:30</option>
                                                <option value="9:00">9:00</option>
                                                <option value="9:30">9:30</option>
                                                <option value="10:00">10:00</option>
                                                <option value="10:30">10:30</option>
                                                <option value="11:00">11:00</option>
                                                <option value="11:30">11:30</option>
                                                <option value="12:00">12:00</option>
                                                <option value="12:30">12:30</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="selectedDayTiming">
                                <div class="col-sm-12 col-xs-12">
                                    <div class="form-group">
                                        <input id="ChkTHU" type="checkbox" value="4" runat="server" class="single thu option-input checkbox"
                                            name="days" />
                                        <br />
                                        <span class="thu" style="font-size: 20px;">Thursday</span>
                                    </div>
                                </div>
                                <div id="Thu" style="display: none;">
                                    <div class="col-md-5 col-sm-6 col-xs-12">
                                        <div class="form-group">
                                            <select id="ddlThuStart" runat="server" class="form-control">
                                                <option value="1:00">1:00</option>
                                                <option value="1:30">1:30</option>
                                                <option value="2:00">2:00</option>
                                                <option value="2:30">2:30</option>
                                                <option value="3:00">3:00</option>
                                                <option value="3:30">3:30</option>
                                                <option value="4:00">4:00</option>
                                                <option value="4:30">4:30</option>
                                                <option value="5:00">5:00</option>
                                                <option value="5:30">5:30</option>
                                                <option value="6:00">6:00</option>
                                                <option value="6:30">6:30</option>
                                                <option value="7:00">7:00</option>
                                                <option value="7:30">7:30</option>
                                                <option value="8:00">8:00</option>
                                                <option value="8:30">8:30</option>
                                                <option value="9:00">9:00</option>
                                                <option value="9:30">9:30</option>
                                                <option value="10:00">10:00</option>
                                                <option value="10:30">10:30</option>
                                                <option value="11:00">11:00</option>
                                                <option value="11:30">11:30</option>
                                                <option value="12:00">12:00</option>
                                                <option value="12:30">12:30</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-5 col-sm-6 col-xs-12">
                                        <div class="form-group">
                                            <select id="ddlThuEnd" runat="server" class="form-control">
                                                <option value="1:00">1:00</option>
                                                <option value="1:30">1:30</option>
                                                <option value="2:00">2:00</option>
                                                <option value="2:30">2:30</option>
                                                <option value="3:00">3:00</option>
                                                <option value="3:30">3:30</option>
                                                <option value="4:00">4:00</option>
                                                <option value="4:30">4:30</option>
                                                <option value="5:00">5:00</option>
                                                <option value="5:30">5:30</option>
                                                <option value="6:00">6:00</option>
                                                <option value="6:30">6:30</option>
                                                <option value="7:00">7:00</option>
                                                <option value="7:30">7:30</option>
                                                <option value="8:00">8:00</option>
                                                <option value="8:30">8:30</option>
                                                <option value="9:00">9:00</option>
                                                <option value="9:30">9:30</option>
                                                <option value="10:00">10:00</option>
                                                <option value="10:30">10:30</option>
                                                <option value="11:00">11:00</option>
                                                <option value="11:30">11:30</option>
                                                <option value="12:00">12:00</option>
                                                <option value="12:30">12:30</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="selectedDayTiming">
                                <div class="col-sm-12 col-xs-12">
                                    <div class="form-group">
                                        <input id="ChkFRI" type="checkbox" value="5" runat="server" class="single fri option-input checkbox"
                                            name="days" />
                                        <br />
                                        <span class="fri" style="font-size: 20px;">Friday</span>
                                    </div>
                                </div>
                                <div id="Fri" style="display: none;">
                                    <div class="col-md-5 col-sm-6 col-xs-12">
                                        <div class="form-group">
                                            <select id="ddlFriStart" runat="server" class="form-control">
                                                <option value="1:00">1:00</option>
                                                <option value="1:30">1:30</option>
                                                <option value="2:00">2:00</option>
                                                <option value="2:30">2:30</option>
                                                <option value="3:00">3:00</option>
                                                <option value="3:30">3:30</option>
                                                <option value="4:00">4:00</option>
                                                <option value="4:30">4:30</option>
                                                <option value="5:00">5:00</option>
                                                <option value="5:30">5:30</option>
                                                <option value="6:00">6:00</option>
                                                <option value="6:30">6:30</option>
                                                <option value="7:00">7:00</option>
                                                <option value="7:30">7:30</option>
                                                <option value="8:00">8:00</option>
                                                <option value="8:30">8:30</option>
                                                <option value="9:00">9:00</option>
                                                <option value="9:30">9:30</option>
                                                <option value="10:00">10:00</option>
                                                <option value="10:30">10:30</option>
                                                <option value="11:00">11:00</option>
                                                <option value="11:30">11:30</option>
                                                <option value="12:00">12:00</option>
                                                <option value="12:30">12:30</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-5 col-sm-6 col-xs-12">
                                        <div class="form-group">
                                            <select id="ddlFriEnd" runat="server" class="form-control">
                                                <option value="1:00">1:00</option>
                                                <option value="1:30">1:30</option>
                                                <option value="2:00">2:00</option>
                                                <option value="2:30">2:30</option>
                                                <option value="3:00">3:00</option>
                                                <option value="3:30">3:30</option>
                                                <option value="4:00">4:00</option>
                                                <option value="4:30">4:30</option>
                                                <option value="5:00">5:00</option>
                                                <option value="5:30">5:30</option>
                                                <option value="6:00">6:00</option>
                                                <option value="6:30">6:30</option>
                                                <option value="7:00">7:00</option>
                                                <option value="7:30">7:30</option>
                                                <option value="8:00">8:00</option>
                                                <option value="8:30">8:30</option>
                                                <option value="9:00">9:00</option>
                                                <option value="9:30">9:30</option>
                                                <option value="10:00">10:00</option>
                                                <option value="10:30">10:30</option>
                                                <option value="11:00">11:00</option>
                                                <option value="11:30">11:30</option>
                                                <option value="12:00">12:00</option>
                                                <option value="12:30">12:30</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="selectedDayTiming">
                                <div class="col-sm-12 col-xs-12">
                                    <div class="form-group">
                                        <input id="ChkSAT" type="checkbox" value="6" runat="server" class="single sat option-input checkbox"
                                            name="days" />
                                        <br />
                                        <span class="sat" style="font-size: 20px;">Saturday</span>
                                    </div>
                                </div>
                                <div id="Sat" style="display: none;">
                                    <div class="col-md-5 col-sm-6 col-xs-12">
                                        <div class="form-group">
                                            <select id="ddlSatStart" runat="server" class="form-control">
                                                <option value="1:00">1:00</option>
                                                <option value="1:30">1:30</option>
                                                <option value="2:00">2:00</option>
                                                <option value="2:30">2:30</option>
                                                <option value="3:00">3:00</option>
                                                <option value="3:30">3:30</option>
                                                <option value="4:00">4:00</option>
                                                <option value="4:30">4:30</option>
                                                <option value="5:00">5:00</option>
                                                <option value="5:30">5:30</option>
                                                <option value="6:00">6:00</option>
                                                <option value="6:30">6:30</option>
                                                <option value="7:00">7:00</option>
                                                <option value="7:30">7:30</option>
                                                <option value="8:00">8:00</option>
                                                <option value="8:30">8:30</option>
                                                <option value="9:00">9:00</option>
                                                <option value="9:30">9:30</option>
                                                <option value="10:00">10:00</option>
                                                <option value="10:30">10:30</option>
                                                <option value="11:00">11:00</option>
                                                <option value="11:30">11:30</option>
                                                <option value="12:00">12:00</option>
                                                <option value="12:30">12:30</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-5 col-sm-6 col-xs-12">
                                        <div class="form-group">
                                            <select id="ddlSatEnd" runat="server" class="form-control">
                                                <option value="1:00">1:00</option>
                                                <option value="1:30">1:30</option>
                                                <option value="2:00">2:00</option>
                                                <option value="2:30">2:30</option>
                                                <option value="3:00">3:00</option>
                                                <option value="3:30">3:30</option>
                                                <option value="4:00">4:00</option>
                                                <option value="4:30">4:30</option>
                                                <option value="5:00">5:00</option>
                                                <option value="5:30">5:30</option>
                                                <option value="6:00">6:00</option>
                                                <option value="6:30">6:30</option>
                                                <option value="7:00">7:00</option>
                                                <option value="7:30">7:30</option>
                                                <option value="8:00">8:00</option>
                                                <option value="8:30">8:30</option>
                                                <option value="9:00">9:00</option>
                                                <option value="9:30">9:30</option>
                                                <option value="10:00">10:00</option>
                                                <option value="10:30">10:30</option>
                                                <option value="11:00">11:00</option>
                                                <option value="11:30">11:30</option>
                                                <option value="12:00">12:00</option>
                                                <option value="12:30">12:30</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-offset-2 col-sm-10">
                            <br />
                            <button type="submit" id="btnSave" class="btn btn-success">
                                update</button>
                        </div>
                    </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div>
    <style type="text/css">
        .option-input
        {
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            -o-appearance: none;
            appearance: none;
            position: relative;
            top: 13.33333px;
            right: 0;
            bottom: 0;
            left: 0;
            height: 30px;
            width: 30px;
            transition: all 0.15s ease-out 0s;
            background: #cbd1d8;
            border: none;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            margin-right: 0.5rem;
            outline: none;
            position: relative;
            z-index: 1000;
        }
        .option-input:hover
        {
            background: #9faab7;
        }
        .option-input:checked
        {
            background: #40e0d0;
        }
        .option-input:checked::before
        {
            height: 30px;
            width: 30px;
            position: absolute;
            content: '✔';
            display: inline-block;
            font-size: 16.66667px;
            text-align: center;
            line-height: 30px;
        }
        .option-input:checked::after
        {
            -webkit-animation: click-wave 0.65s;
            -moz-animation: click-wave 0.65s;
            animation: click-wave 0.65s;
            background: #40e0d0;
            content: '';
            display: block;
            position: relative;
            z-index: 100;
        }
        .option-input.radio
        {
            border-radius: 50%;
        }
        .option-input.radio::after
        {
            border-radius: 50%;
        }
        select, .form-control, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input
        {
            color: #999;
            width: 100%;
            height: 40px;
            outline: none;
            background: #fff;
            font-size: 14px;
            font-weight: 400;
            line-height: 18px;
            padding: 10px 15px;
            box-shadow: none;
            border-radius: 0;
            display: inline-block;
            vertical-align: middle;
            border: 1px solid #ddd;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            $('#addweekhours').click(function () {
                $('#showweekhours').slideToggle("fast");
            });
            $('#fullhours').click(function () {
                $('#showweekhours').hide("fast");
            });

            $('input[type="radio"]').on('change', function () {
                $('input[type="radio"]').not(this).prop('checked', false);
            });

            $('.sun').click(function () {
                $('#Sun').slideToggle("fast");
            });
            $('.mon').click(function () {
                $('#Mon').slideToggle("fast");
            });
            $('.tue').click(function () {
                $('#Tue').slideToggle("fast");
            });
            $('.wed').click(function () {
                $('#Wed').slideToggle("fast");
            });
            $('.thu').click(function () {
                $('#Thu').slideToggle("fast");
            });
            $('.fri').click(function () {
                $('#Fri').slideToggle("fast");
            });
            $('.sat').click(function () {
                $('#Sat').slideToggle("fast");
            });
        });
        $(function () {
            $('[id*=btnSave]').click(function () {
                var Timings = [];
                $('.single:checkbox:checked').each(function () {
                    var selectedDayTiming = $(this).parent().parent().parent();
                    var startTime = $(selectedDayTiming).find('select').eq(0).val();
                    var endTime = $(selectedDayTiming).find('select').eq(1).val();
                    var day = $.trim($(this).parent()[0].innerText);
                        
                    var Timing = {};
                    Timing.Day = day;
                    Timing.StartTime = startTime;
                    Timing.EndTime = endTime;
                    Timings.push(Timing);
                });

                $.ajax({
                    type: "POST",
                    url: "Default.aspx/GetTimings",
                    data: "{ Timings : " + JSON.stringify(Timings) + "}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        $('.single:checkbox:checked').each(function () {
                            $(this).prop('checked', 'false');
                        });
                        alert(response.d);
                    },
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
                return false;
            });
        });
    </script>
</div>

Default.aspx.cs

[WebMethod]
public static string GetTimings(List<Timing> Timings)
{
    List<Timing> SelectedDaysTimings = Timings;
    return "Data Saved Successfully!!";
}

public class Timing
{
    public string Day { get; set; }

    public string StartTime { get; set; }

    public string EndTime { get; set; }
}