<form action="" method="POST" id="demoForm">

<div class="demo-container">
<div class="demo-switch">

<input type="checkbox" name="archery" id="demo-archery">
<label for="demo-archery"><span>Archery</span></label>

<input type="checkbox" name="bowling" id="demo-bowling">
<label for="demo-bowling"><span>Bowling</span></label>

<input type="checkbox" name="climbing" id="demo-climbing">
<label for="demo-climbing"><span>Climbing</span></label>

</div>
</div> 

<div class="container-fluid">
<div class="row justify-content-between">
<div class="col-md-8">
<div id="message"></div>
</div>

<div class="col-md-4">
<div class="submit-button-container">
<input name="submit" type="submit" value="Submit" class="btn btn-primary">
</div>
</div>

</div>
</div> 

</form>

.demo-switch input[type=checkbox] {
visibility: hidden;
height: 0;
width: 0;
}

.demo-switch label {
position: relative;
display: block;
cursor: pointer;
background-color: #CCCCCC;
border-radius: 100px;
width: 66px;
height: 30px;
}

.demo-switch input:checked + label {
background-color: #63AE6F;
}

.demo-switch input:checked + label::after {
left: calc(100% - 4px);
transform: translateX(-100%);
}

.demo-switch input:checked + label::before {
font: 18px/1 FontAwesome;
position: absolute;
content: '\f00c';
top: 6px;
left: 10px;
color: #FFFFFF;
font-weight: bold;
}

.demo-switch label::after {
content: '';
position: absolute;
top: 4px;
left: 6px;
width: 22px;
height: 22px;
background-color: #FFFFFF;
border-radius: 90px;
transition: 0.3s;
}

.demo-switch span {
display: inline-block;
position: absolute;
width: 160px;
top: 3px;
left: 100px;
}

/* page demo */
.demo-container {
margin: 4em auto;
max-width: 320px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border-radius: 6px;
padding: 1em 1em 2em 1em;
background: linear-gradient(#f0f0f0, #e5e5e5);
} 

.submit-button-container {
text-align: right;
}

#message {
background-color: rgba(193, 193, 193, .24);
padding: 4px 14px;
border-radius: 4px;
}

.demo-selected {
font-weight: bolder;
}

<script>
$(function () {
$("#message").html("Please select an activity from the list");
$('#demoForm').on('submit', function (event) {
$.ajax({
type: 'post',
url: 'post.php',
data: $('form').serialize(),
success: function (data) {
$("#message").html(data);
}
});
event.preventDefault();
});
});
</script>

<?php
$archery = $_POST['archery'];
$bowling = $_POST['bowling'];
$climbing = $_POST['climbing'];


if (isset($archery)) {
$chosen_activities = "You have selected <strong>archery</strong>";
}

if (isset($bowling)) {
$chosen_activities = "You have selected <strong>bowling</strong>";
}

if (isset($climbing)) {
$chosen_activities = "You have selected <strong>climbing</strong>";
}

if (isset($archery, $bowling)) {
$chosen_activities = "You have selected <strong>archery</strong> and <strong>bowling</strong>";
}

if (isset($bowling, $climbing)) {
$chosen_activities = "You have selected <strong>bowling</strong> and <strong>climbing</strong> ";
}

if (isset($archery, $climbing)) {
$chosen_activities = "You have selected <strong>archery</strong> and <strong>climbing</strong>";
}

if (isset($archery, $bowling, $climbing)) {
$chosen_activities = "You have selected all activities from the list: <strong>archery</strong>, <strong>bowling</strong> and <strong>climbing</strong> ";
}

elseif((empty($archery)) && (empty($bowling)) && (empty($climbing))){
$chosen_activities = "Please select an activity from the list";
} 

echo $chosen_activities;
?>