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>
<label>
<input type="radio" id="fullhours" class="option-input radio" />
<br />
<span style="font-size: 20px;">24 hours x 7 days</span> <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; }
}