Develop Reference

Changing current text for custom HTML dropdowns

I'm creating a set of dropdowns with a custom look so I've built these using divs and checkboxes rather than the usual element
I'm looking to change the 'select-wrapper--title' text (e.g. the first option) to whatever is selected in the dropdown
I'm having some trouble doing this with multiple dropdowns, it seems to change the title for all of them instead of just the dropdown I'm interacting with. I think I need a loop but I'm not sure how to go about this logic
I've created a JSFiddle of my code here: https://jsfiddle.net/m9h32nzq/6/
But here is the code here too:
$(function() {
$(".filter-grid .select-wrapper--title").on("click", function() {
var index = $(this).index(".select-wrapper--title");
console.log(index);
if ($(".select-wrapper.open").length >= 1) {
if ($(this).parents(".select-wrapper").hasClass("open")) {
$(".filter-grid .select-wrapper.open").removeClass("open");
} else {
//Close other filter boxes if open
$(".filter-grid .select-wrapper.open").removeClass("open");
$(".filter-grid .select-wrapper").eq(index).addClass("open");
}
} else {
$(".filter-grid .select-wrapper").eq(index).addClass("open");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-grid">
<div class="select-filter">
<div class="select-wrapper">
<label class="select-wrapper--title">No. of Nights</label>
<div class="select-wrapper--dropdown">
<label class="select-item">
<input type="checkbox" class="checkbox" value="">
1 Night
</label>
<label class="select-item">
<input type="checkbox" class="checkbox" value="">
2 Nights
</label>
<label class="select-item">
<input type="checkbox" class="checkbox" value="">
3 Nights
</label>
</div>
</div>
</div>
<div class="select-filter">
<div class="select-wrapper">
<label class="select-wrapper--title">No. of People</label>
<div class="select-wrapper--dropdown">
<label class="select-item">
<input type="checkbox" class="checkbox" value="">
1 Person
</label>
<label class="select-item">
<input type="checkbox" class="checkbox" value="">
2 People
</label>
<label class="select-item">
<input type="checkbox" class="checkbox" value="">
3 People
</label>
</div>
</div>
</div>
</div>

Assuming I've understood what you're asking, you want the text label for the dropdown to be filled with the text labels of the selected checkboxes within each instance.
To do this you simply need to use DOM traversal to find the checked boxes within the current dropdown. From there you can build an array of their values using map(). You can also provide a default value for the dropdown in a data attribute for the cases where no checkboxes are selected.
Also note that you can massively simplify the code you're using to show/hide the dropdown options. All you need is toggleClass().
Taking this a step further, you can hook an event handler to the document to hide the dropdown when the user clicks outside of it.
With all that said, here's a working example updated to ES6.
jQuery($ => {
// show dropdown on click inside
$(".filter-grid .select-wrapper--title").on("click", e => {
e.stopPropagation();
$(e.currentTarget).closest('.select-wrapper').toggleClass('open');
});
// hide dropdowns on click outside
$(document).on('click', e => {
if ($(e.target).closest('.select-filter').length == 0)
$('.select-wrapper').removeClass('open');
});
// set dropdown text on checkbox update
$('.filter-grid :checkbox').on('change', e => {
let $container = $(e.target).closest('.select-wrapper');
let values = $container.find(':checkbox:checked').map((i, el) => el.value).get().join(', ');
if (!values)
values = $container.find('.select-wrapper--title').data('default');
$container.find('.select-wrapper--title').text(values);
});
});
.filter-grid {
margin-bottom: 10px;
max-width: 300px
}
.filter-grid .select-filter {
padding: 5px 10px 5px 0;
z-index: 99
}
.filter-grid .select-filter .select-wrapper {
flex: 0 0 100%;
display: block;
position: relative;
width: 100%
}
.filter-grid .select-filter .select-wrapper:after {
border: 5px solid transparent;
border-right-color: orange;
border-bottom-color: orange;
position: absolute;
top: 16px;
right: 15px;
content: "";
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1
}
.filter-grid .select-filter .select-wrapper .select-wrapper--title {
position: relative;
display: block;
font-weight: 500;
cursor: pointer;
border: 2px solid orange;
padding: 12px 35px 12px 20px;
color: orange;
font-family: museo-slab, serif
}
.filter-grid .select-filter .select-wrapper .select-wrapper--dropdown {
overflow-y: hidden;
max-height: 0;
position: relative;
z-index: 9;
background: white;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.4);
opacity: 1;
visibility: hidden;
min-width: 150px;
overflow: hidden
}
.filter-grid .select-filter .select-wrapper .select-wrapper--dropdown div {
padding: 10px
}
.filter-grid .select-filter .select-wrapper .select-wrapper--dropdown .select-item {
display: block;
width: 100%;
line-height: normal;
padding: 5px 0 5px 17px
}
.filter-grid .select-filter .select-wrapper .select-wrapper--dropdown .select-item .checkbox {
top: 7px
}
.filter-grid .select-filter .select-wrapper.open .select-wrapper--dropdown {
max-height: 250px;
overflow-y: auto;
opacity: 1;
visibility: visible
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="filter-grid">
<div class="select-filter">
<div class="select-wrapper">
<label class="select-wrapper--title" data-default="No. of Nights">No. of Nights</label>
<div class="select-wrapper--dropdown">
<label class="select-item">
<input type="checkbox" class="checkbox" value="1 Night">
1 Night
</label>
<label class="select-item">
<input type="checkbox" class="checkbox" value="2 Nights">
2 Nights
</label>
<label class="select-item">
<input type="checkbox" class="checkbox" value="3 Nights">
3 Nights
</label>
</div>
</div>
</div>
<div class="select-filter">
<div class="select-wrapper">
<label class="select-wrapper--title" data-default="No. of People">No. of People</label>
<div class="select-wrapper--dropdown">
<label class="select-item">
<input type="checkbox" class="checkbox" value="1 Person">
1 Person
</label>
<label class="select-item">
<input type="checkbox" class="checkbox" value="2 People">
2 People
</label>
<label class="select-item">
<input type="checkbox" class="checkbox" value="3 People">
3 People
</label>
</div>
</div>
</div>
</div>
One last thing to note is that the values in your controls don't make sense. A user shouldn't be allowed to select multiple selections from wither dropdown. For example, how can I possibly book '1 Night' and '3 Nights' at the same time? I assume this is because this is just a learning exercise, and not for a production system.

I made the following changes to your code:
type="radio" instead of type="checkbox" so you dont need additional logic to uncheck other boxes
Wrap the dropdown item text in a span so you can read it easily
Added JS code at the bottom which does what you eventually want.
<div class="select-filter">
<div class="select-wrapper">
<label class="select-wrapper--title">No. of Nights</label>
<div class="select-wrapper--dropdown">
<label class="select-item">
<input type="radio" class="checkbox" name="item" value="">
<span>1 Night</span>
</label>
<label class="select-item">
<input type="radio" class="checkbox" name="item" value="">
<span>2 Nights</span>
</label>
<label class="select-item">
<input type="radio" class="checkbox" name="item"value="">
<span>3 Nights</span>
</label>
</div>
</div>
</div>
<div class="select-filter">
<div class="select-wrapper">
<label class="select-wrapper--title">No. of People</label>
<div class="select-wrapper--dropdown">
<label class="select-item">
<input type="radio" class="checkbox" name="item" value="">
<span>1 Person</span>
</label>
<label class="select-item">
<input type="radio" class="checkbox" name="item" value="">
<span>2 People</span>
</label>
<label class="select-item">
<input type="radio" class="checkbox" name="item" value="">
<span>3 People</span>
</label>
</div>
</div>
</div>
$('[name="item"]').each(function() {
$(this).on('click', function(e) {
const target = $(e.target);
const name = target.next().html();
console.log(target.parent().parent().prev());
target.parent().parent().prev().html(name);
});
});

Checkbox not checking and hiding even if in the same form/div

How to make boxes checkable and not hiding when in the same form?
What works:
Button (hide/display)
Furnishing (dropdown)
Keyword Search (text input)
Bathroom (dropdown)
Save (button)
Search (button)
NOT WORKING:
All checkboxes
Size (2 text input)
How to make sure that I can use and check all the element of this form?
const more_form = document.getElementById('more_form');
const more_button = document.querySelector('div.more_button_wrapper button.more_button');
document.body.addEventListener('click', e => {
e.preventDefault();
e.stopPropagation();
if ((e.target == more_button && more_form.parentNode.style.visibility !== 'visible') || e.target == more_form || e.target.parentNode == more_form) {
more_form.parentNode.style.visibility = 'visible'
} else {
more_form.parentNode.style.visibility = 'hidden'
}
})
* {
margin: 0;
padding: 0;
/* border: thin solid blue;*/
font-family: 'Roboto', sans-serif;
}
html {
height: 100%;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
}
.spacer {
min-height: 300px;
text-align: center;
}
.search_box_flex_main_container {
/* border: thick solid red;*/
display: flex;
justify-content: center;
flex-wrap: nowrap;
}
.button_wrapper {
background: white none repeat scroll 0% 0%;
border-radius: 6px;
height: 48px;
}
.button {
min-width: 120px;
}
.building_text_input {
min-width: 200px;
text-align: center;
}
.city_form {
text-align: center;
}
.more_button_container {
border: thick solid yellow;
}
.more_button_wrapper {
border: thick solid red;
}
.more_form {
display: flex;
flex-direction: column;
border: thick solid green;
}
.amenities_check_box_small_row_container {
display: flex;
}
form.more_form>* {
border: thin dotted blue;
}
<div class="more_button_container">
<p>Yellow: .more_button_container</p>
<div class="more_button_wrapper">
<p>Red: .more_button_wrapper</p>
<button class="more_button">More</button>
</div>
<div class="more_form_container" style="visibility: hidden;">
<form class="more_form" id="more_form">
<p>Green: .more_form</p>
<h4>Furnishing</h4>
<select>
<option value="show_all">Show All</option>
<option value="furnished">Furnished</option>
<option value="unfurnished">Unfurnished</option>
</select>
<h4>Amenities</h4>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="maids_room" name="maids_room" value="maids_room">
<label for="maids_room"> Maids Room</label><br>
<input type="checkbox" id="study" name="study" value="study">
<label for="study"> Study</label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="central_ac" name="central_ad" value="central_ad">
<label for="central_ac"> Central AC </label><br>
<input type="checkbox" id="balcony" name="balcony" value="balcony">
<label for="balcony"> Balcony </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="privet_garden" name="privet_garden" value="privet_garden">
<label for="privet_garden"> Private Garden </label><br>
<input type="checkbox" id="private_pool" name="private_pool" value="private_pool">
<label for="private_pool"> Private Pool </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="private_gym" name="private_gym" value="private_gym">
<label for="private_gym"> Private Gym </label><br>
<input type="checkbox" id="private_jacuzzi" name="private_jacuzzi" value="private_jacuzzi">
<label for="private_jacuzzi"> Private Jacuzzi</label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="shared_pool" name="shared_pool" value="shared_pool">
<label for="shared_pool"> Shared Pool </label><br>
<input type="checkbox" id="shared_spa" name="shared_spa" value="shared_spa">
<label for="shared_spa"> Shared Spa </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="shared_gym" name="shared_gym" value="shared_gym">
<label for="shared_gym"> Shared Gym </label><br>
<input type="checkbox" id="security" name="security" value="security">
<label for="security"> Security </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="concierge_service" name="concierge_service" value="concierge_service">
<label for="concierge_service"> Concierge Service </label><br>
<input type="checkbox" id="maid_service" name="maid_service" value="maid_service">
<label for="maid_service"> Maid Service </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="covered_parking" name="covered_parking" value="covered_parking">
<label for="covered_parking"> Covered Parking </label><br>
<input type="checkbox" id="built_in_wardrobe" name="built_in_wardrobe" value="built_in_wardrobe">
<label for="built_in_wardrobe"> Built-in Wardrobe </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="walk_in_closet" name="walk_in_closet" value="walk_in_closet">
<label for="walk_in_closet"> Walk-in Closet </label><br>
<input type="checkbox" id="built_in_kitchen" name="built_in_kitchen" value="built_in_kitchen">
<label for="built_in_kitchen"> Built-in Kitchen </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="view_of_water" name="view_of_water" value="view_of_water">
<label for="view_of_water"> View Of Water </label><br>
<input type="checkbox" id="view_of_landmark" name="view_of_landmark" value="view_of_landmark">
<label for="view_of_landmark"> View Of Landmark </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="pets_allowed" name="pets_allowed" value="pets_allowed">
<label for="pets_allowed"> Pets Allowed </label><br>
</div>
<h4>Rent Is Paid</h4>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="yearly" name="yearly" value="yearly">
<label for="yearly"> Yearly </label><br>
<input type="checkbox" id="bi_yearly" name="bi_yearly" value="bi_yearly">
<label for="bi_yearly"> Bi-Yearly </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="quarterly" name="quarterly" value="quarterly">
<label for="quarterly"> Quarterly </label><br>
<input type="checkbox" id="monthly" name="monthly" value="monthly">
<label for="monthly"> Monthly </label><br>
</div>
<h4>Keyword Search</h4>
<input type="text" placeholder="Eg. Pool, Security, Ref.ID Number">
<h4>Bathroom</h4>
<select>
<option value="one_bathroom">1 Bathroom or More</option>
<option value="two_bathroom">2 Bathroom or More</option>
<option value="three_bathroom">3 Bathroom or More</option>
<option value="four_bathroom">4 Bathroom or More</option>
<option value="five_bathroom">5 Bathroom or More</option>
<option value="six_bathroom">6 Bathroom or More</option>
<option value="seven_bathroom">7 Bathroom or More</option>
<option value="eight_bathroom">8 Bathroom or More</option>
<option value="nine_bathroom">9 Bathroom or More</option>
<option value="ten_bathroom">10 Bathroom or More</option>
<option value="eleven_bathroom">11 Bathroom or More</option>
<option value="twelve_bathroom">12 Bathroom or More</option>
</select>
<div class="amenities_check_box_small_row_container">
<h4>Size</h4>
<input type="number">
<input type="number">
</div>
<div class="amenities_check_box_small_row_container">
<h4>Ads with video only</h4>
<input type="checkbox" id="ads_with_video_only" name="ads_with_video_only" value="ads_with_video_only">
<h4>Ads with tour only</h4>
<input type="checkbox" id="ads_with_tour_only" name="ads_with_tour_only" value="ads_with_tour_only">
</div>
<div class="amenities_check_box_small_row_container">
<button> Save </button>
<button> Search </button>
</div>
</form>
</div>
</div>

One way that you might do this with an unlimited number ( potentially ) of form elements would be to make use of form.elements and check that the target clicked is within that collection
const form = document.forms.more_form;
const bttn = document.querySelector('div.bttn_wrapper button.bttn');
document.body.addEventListener('click', e => {
e.stopPropagation();
const elems=Array.from( form.elements );
if (( e.target == bttn && more_form.parentNode.style.visibility !== 'visible' ) || e.target == more_form || e.target.parentNode == more_form || elems.includes( e.target ) ) {
form.parentNode.style.visibility = 'visible'
} else {
form.parentNode.style.visibility = 'hidden'
}
})
* {
margin: 0;
padding: 0;
/* border: thin solid blue;*/
font-family: 'Roboto', sans-serif;
}
html {
height: 100%;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
}
.spacer {
min-height: 300px;
text-align: center;
}
.search_box_flex_main_container {
/* border: thick solid red;*/
display: flex;
justify-content: center;
flex-wrap: nowrap;
}
.button_wrapper {
background: white none repeat scroll 0% 0%;
border-radius: 6px;
height: 48px;
}
.button {
min-width: 120px;
}
.building_text_input {
min-width: 200px;
text-align: center;
}
.city_form {
text-align: center;
}
.more_button_container {
border: thick solid yellow;
}
.more_button_wrapper {
border: thick solid red;
}
.more_form {
display: flex;
flex-direction: column;
border: thick solid green;
}
.amenities_check_box_small_row_container {
display: flex;
}
form.more_form>* {
border: thin dotted blue;
}
[type='checkbox']{margin:0 1rem;}
form{background:pink}
<div class="bttn_container">
<p>Yellow: .bttn_container</p>
<div class="bttn_wrapper">
<p>Red: .bttn_wrapper</p>
<button class="bttn">More</button>
</div>
<div class="more_form_container" style="visibility: hidden;">
<form class="more_form" name="more_form">
<p>Green: .more_form</p>
<h4>Furnishing</h4>
<select>
<option value="show_all">Show All</option>
<option value="furnished">Furnished</option>
<option value="unfurnished">Unfurnished</option>
</select>
<h4>Amenities</h4>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="maids_room" name="maids_room" value="maids_room">
<label for="maids_room"> Maids Room</label><br>
<input type="checkbox" id="study" name="study" value="study">
<label for="study"> Study</label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="central_ac" name="central_ad" value="central_ad">
<label for="central_ac"> Central AC </label><br>
<input type="checkbox" id="balcony" name="balcony" value="balcony">
<label for="balcony"> Balcony </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="privet_garden" name="privet_garden" value="privet_garden">
<label for="privet_garden"> Private Garden </label><br>
<input type="checkbox" id="private_pool" name="private_pool" value="private_pool">
<label for="private_pool"> Private Pool </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="private_gym" name="private_gym" value="private_gym">
<label for="private_gym"> Private Gym </label><br>
<input type="checkbox" id="private_jacuzzi" name="private_jacuzzi" value="private_jacuzzi">
<label for="private_jacuzzi"> Private Jacuzzi</label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="shared_pool" name="shared_pool" value="shared_pool">
<label for="shared_pool"> Shared Pool </label><br>
<input type="checkbox" id="shared_spa" name="shared_spa" value="shared_spa">
<label for="shared_spa"> Shared Spa </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="shared_gym" name="shared_gym" value="shared_gym">
<label for="shared_gym"> Shared Gym </label><br>
<input type="checkbox" id="security" name="security" value="security">
<label for="security"> Security </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="concierge_service" name="concierge_service" value="concierge_service">
<label for="concierge_service"> Concierge Service </label><br>
<input type="checkbox" id="maid_service" name="maid_service" value="maid_service">
<label for="maid_service"> Maid Service </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="covered_parking" name="covered_parking" value="covered_parking">
<label for="covered_parking"> Covered Parking </label><br>
<input type="checkbox" id="built_in_wardrobe" name="built_in_wardrobe" value="built_in_wardrobe">
<label for="built_in_wardrobe"> Built-in Wardrobe </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="walk_in_closet" name="walk_in_closet" value="walk_in_closet">
<label for="walk_in_closet"> Walk-in Closet </label><br>
<input type="checkbox" id="built_in_kitchen" name="built_in_kitchen" value="built_in_kitchen">
<label for="built_in_kitchen"> Built-in Kitchen </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="view_of_water" name="view_of_water" value="view_of_water">
<label for="view_of_water"> View Of Water </label><br>
<input type="checkbox" id="view_of_landmark" name="view_of_landmark" value="view_of_landmark">
<label for="view_of_landmark"> View Of Landmark </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="pets_allowed" name="pets_allowed" value="pets_allowed">
<label for="pets_allowed"> Pets Allowed </label><br>
</div>
<h4>Rent Is Paid</h4>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="yearly" name="yearly" value="yearly">
<label for="yearly"> Yearly </label><br>
<input type="checkbox" id="bi_yearly" name="bi_yearly" value="bi_yearly">
<label for="bi_yearly"> Bi-Yearly </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="quarterly" name="quarterly" value="quarterly">
<label for="quarterly"> Quarterly </label><br>
<input type="checkbox" id="monthly" name="monthly" value="monthly">
<label for="monthly"> Monthly </label><br>
</div>
<h4>Keyword Search</h4>
<input type="text" placeholder="Eg. Pool, Security, Ref.ID Number">
<h4>Bathroom</h4>
<select>
<option value="one_bathroom">1 Bathroom or More</option>
<option value="two_bathroom">2 Bathroom or More</option>
<option value="three_bathroom">3 Bathroom or More</option>
<option value="four_bathroom">4 Bathroom or More</option>
<option value="five_bathroom">5 Bathroom or More</option>
<option value="six_bathroom">6 Bathroom or More</option>
<option value="seven_bathroom">7 Bathroom or More</option>
<option value="eight_bathroom">8 Bathroom or More</option>
<option value="nine_bathroom">9 Bathroom or More</option>
<option value="ten_bathroom">10 Bathroom or More</option>
<option value="eleven_bathroom">11 Bathroom or More</option>
<option value="twelve_bathroom">12 Bathroom or More</option>
</select>
<div class="amenities_check_box_small_row_container">
<h4>Size</h4>
<input type="number">
<input type="number">
</div>
<div class="amenities_check_box_small_row_container">
<h4>Ads with video only</h4>
<input type="checkbox" id="ads_with_video_only" name="ads_with_video_only" value="ads_with_video_only">
<h4>Ads with tour only</h4>
<input type="checkbox" id="ads_with_tour_only" name="ads_with_tour_only" value="ads_with_tour_only">
</div>
<div class="amenities_check_box_small_row_container">
<button> Save </button>
<button> Search </button>
</div>
</form>
</div>
</div>

You need to place the check on the more_button right to the top. So, if a click lands on anything other than the more_button nothing will happen instead if your previous action making everything disappear.
const more_form = document.getElementById('more_form');
const more_button = document.querySelector('div.more_button_wrapper button.more_button');
document.body.addEventListener('click', e => { if(e.target!=more_button) return true;
e.preventDefault();
e.stopPropagation();
const frmstyle=more_form.parentNode.style;
frmstyle.visibility=frmstyle.visibility=="visible"?"hidden":"visible";
})
* {
margin: 0;
padding: 0;
/* border: thin solid blue;*/
font-family: 'Roboto', sans-serif;
}
html {
height: 100%;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
}
.spacer {
min-height: 300px;
text-align: center;
}
.search_box_flex_main_container {
/* border: thick solid red;*/
display: flex;
justify-content: center;
flex-wrap: nowrap;
}
.button_wrapper {
background: white none repeat scroll 0% 0%;
border-radius: 6px;
height: 48px;
}
.button {
min-width: 120px;
}
.building_text_input {
min-width: 200px;
text-align: center;
}
.city_form {
text-align: center;
}
.more_button_container {
border: thick solid yellow;
}
.more_button_wrapper {
border: thick solid red;
}
.more_form {
display: flex;
flex-direction: column;
border: thick solid green;
}
.amenities_check_box_small_row_container {
display: flex;
}
form.more_form>* {
border: thin dotted blue;
}
<div class="more_button_container">
<p>Yellow: .more_button_container</p>
<div class="more_button_wrapper">
<p>Red: .more_button_wrapper</p>
<button class="more_button">More</button>
</div>
<div class="more_form_container" style="visibility: hidden;">
<form class="more_form" id="more_form">
<p>Green: .more_form</p>
<h4>Furnishing</h4>
<select>
<option value="show_all">Show All</option>
<option value="furnished">Furnished</option>
<option value="unfurnished">Unfurnished</option>
</select>
<h4>Amenities</h4>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="maids_room" name="maids_room" value="maids_room">
<label for="maids_room"> Maids Room</label><br>
<input type="checkbox" id="study" name="study" value="study">
<label for="study"> Study</label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="central_ac" name="central_ad" value="central_ad">
<label for="central_ac"> Central AC </label><br>
<input type="checkbox" id="balcony" name="balcony" value="balcony">
<label for="balcony"> Balcony </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="privet_garden" name="privet_garden" value="privet_garden">
<label for="privet_garden"> Private Garden </label><br>
<input type="checkbox" id="private_pool" name="private_pool" value="private_pool">
<label for="private_pool"> Private Pool </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="private_gym" name="private_gym" value="private_gym">
<label for="private_gym"> Private Gym </label><br>
<input type="checkbox" id="private_jacuzzi" name="private_jacuzzi" value="private_jacuzzi">
<label for="private_jacuzzi"> Private Jacuzzi</label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="shared_pool" name="shared_pool" value="shared_pool">
<label for="shared_pool"> Shared Pool </label><br>
<input type="checkbox" id="shared_spa" name="shared_spa" value="shared_spa">
<label for="shared_spa"> Shared Spa </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="shared_gym" name="shared_gym" value="shared_gym">
<label for="shared_gym"> Shared Gym </label><br>
<input type="checkbox" id="security" name="security" value="security">
<label for="security"> Security </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="concierge_service" name="concierge_service" value="concierge_service">
<label for="concierge_service"> Concierge Service </label><br>
<input type="checkbox" id="maid_service" name="maid_service" value="maid_service">
<label for="maid_service"> Maid Service </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="covered_parking" name="covered_parking" value="covered_parking">
<label for="covered_parking"> Covered Parking </label><br>
<input type="checkbox" id="built_in_wardrobe" name="built_in_wardrobe" value="built_in_wardrobe">
<label for="built_in_wardrobe"> Built-in Wardrobe </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="walk_in_closet" name="walk_in_closet" value="walk_in_closet">
<label for="walk_in_closet"> Walk-in Closet </label><br>
<input type="checkbox" id="built_in_kitchen" name="built_in_kitchen" value="built_in_kitchen">
<label for="built_in_kitchen"> Built-in Kitchen </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="view_of_water" name="view_of_water" value="view_of_water">
<label for="view_of_water"> View Of Water </label><br>
<input type="checkbox" id="view_of_landmark" name="view_of_landmark" value="view_of_landmark">
<label for="view_of_landmark"> View Of Landmark </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="pets_allowed" name="pets_allowed" value="pets_allowed">
<label for="pets_allowed"> Pets Allowed </label><br>
</div>
<h4>Rent Is Paid</h4>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="yearly" name="yearly" value="yearly">
<label for="yearly"> Yearly </label><br>
<input type="checkbox" id="bi_yearly" name="bi_yearly" value="bi_yearly">
<label for="bi_yearly"> Bi-Yearly </label><br>
</div>
<div class="amenities_check_box_small_row_container">
<input type="checkbox" id="quarterly" name="quarterly" value="quarterly">
<label for="quarterly"> Quarterly </label><br>
<input type="checkbox" id="monthly" name="monthly" value="monthly">
<label for="monthly"> Monthly </label><br>
</div>
<h4>Keyword Search</h4>
<input type="text" placeholder="Eg. Pool, Security, Ref.ID Number">
<h4>Bathroom</h4>
<select>
<option value="one_bathroom">1 Bathroom or More</option>
<option value="two_bathroom">2 Bathroom or More</option>
<option value="three_bathroom">3 Bathroom or More</option>
<option value="four_bathroom">4 Bathroom or More</option>
<option value="five_bathroom">5 Bathroom or More</option>
<option value="six_bathroom">6 Bathroom or More</option>
<option value="seven_bathroom">7 Bathroom or More</option>
<option value="eight_bathroom">8 Bathroom or More</option>
<option value="nine_bathroom">9 Bathroom or More</option>
<option value="ten_bathroom">10 Bathroom or More</option>
<option value="eleven_bathroom">11 Bathroom or More</option>
<option value="twelve_bathroom">12 Bathroom or More</option>
</select>
<div class="amenities_check_box_small_row_container">
<h4>Size</h4>
<input type="number">
<input type="number">
</div>
<div class="amenities_check_box_small_row_container">
<h4>Ads with video only</h4>
<input type="checkbox" id="ads_with_video_only" name="ads_with_video_only" value="ads_with_video_only">
<h4>Ads with tour only</h4>
<input type="checkbox" id="ads_with_tour_only" name="ads_with_tour_only" value="ads_with_tour_only">
</div>
<div class="amenities_check_box_small_row_container">
<button> Save </button>
<button> Search </button>
</div>
</form>
</div>
</div>

Unable to submit the form successfully using Javascript

Here is a code for Quiz app using HTML,CSS and JavaScript. You are given with a few questions and you need to choose one of the options from each question then click submit. The total score secured should be shown in the "You have scored ____ marks". However,there is no change in score when I click submit.
Here is the code for both HTML,CSS and Javascript. Please correct the code and let me know where I did wrong.
<!DOCTYPE html>
<html>
<head>
<title>Quiz Game</title>
</head>
<body>
<style>
.header{
text-align: center;
color:red;
margin-top:100px;
font-size: 100px;
}
.main{
border: solid 1px blue;
background-color: blue;
}
/* .options{
padding-left: 10px;
} */
.options li{
list-style-type: circle;
/* padding-left: 10px; */
font-size: 20px;
}
.result1{
border:2px solid black;
margin-left: 500px;
margin-right: 500px;
background-color: grey;
font-size: 20px;
color:red;
}
.span{
font-size: 50px;
color:salmon;
border:2px solid orangered;
}
</style>
<h1 class="header">QUIZ</h1>
<br>
<div class="main">
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 1</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">1) First Question</p>
<br>
<input type='radio' name='Q1' id='Option-1'value='Option 1' >
<label style="color:white;" for="Option-1">Option 1</label><br>
<br>
<input type='radio' name='Q1' id='Option-2' value='Option 2'>
<label style="color:white;" for="Option-2">Option 2</label><br>
<br>
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 2</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">2) Second Question</p>
<br>
<input type='radio' name='Q2' id='Option-3'value='Option 1' >
<label style="color:white;" for="Option-3">Option 1</label><br>
<br>
<input type='radio' name='Q2' id='Option-4' value='Option 2'>
<label style="color:white;" for="Option-4">Option 2</label><br>
<br>
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 3</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">3) Third Question</p>
<br>
<input type='radio' name='Q3' id='Option-5' value='Option 1'>
<label style="color:white;" for="Option-5">Option 1</label><br>
<br>
<input type='radio' name='Q3' id='Option-6'value='Option 2'>
<label style="color:white;" for="Option-6">Option 2</label><br>
<br>
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 4</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">4) Fourth Question</p>
<br>
<input type='radio' name='Q4' id='Option-7' value='Option 1'>
<label style="color:white;" for="Option-7">Option 1</label><br>
<br>
<input type='radio' name='Q4' id='Option-8' value='Option 2'>
<label style="color:white;" for="Option-8">Option 2</label><br>
<br> <br><br>
</div>
<div style="text-align:center">
<input type="submit" value="Submit" style="font-size:20px;">
</div>
</div>
<div class="result" style="text-align: center;">
<h1 class="result1" >Warning!! Clicking Submit will display the Result</h1>
<p style="font-size: 40px;color:green;">You have scored <span class="span"> 0% </span></p>
</div>
<script src="Quiz.js"></script>
</body>
</html>
Javascript :-
const correctAnswers=['Option 1','Option 2','Option 2','Option 1'];
const form = document.querySelector(".quiz-form");
let score=0;
form.addEventListener('submit',()=>{
form.preventDefault();
const userAnswers=[form.Q1.value,form.Q2.value,form.Q3.value,form.Q4.value];
userAnswers.forEach((answer,index)=>{
if(answer==correctAnswers[index]){
score+=20;
}
console.log(score);
});
const result=document.querySelector(".result")
result.querySelector("span").textContent= '${score}';
});

You need a form element, just wrap the whole quiz in one.
Problem #2, preventDefault() is an event function not a element one, something like this:
form.addEventListener('submit', e => {
e.preventDefault();
// more things .....
});
Finally, you're not interpolating score correctly, use back-ticks, i.e.:
result.querySelector('span').textContent = `${score}`;
Here's a working example with the changes I suggested:
<html>
<head>
<title>Quiz Game</title>
</head>
<body>
<style>
.header {
text-align: center;
color: red;
margin-top: 100px;
font-size: 100px;
}
.main {
border: solid 1px blue;
background-color: blue;
}
/* .options{
padding-left: 10px;
} */
.options li {
list-style-type: circle;
/* padding-left: 10px; */
font-size: 20px;
}
.result1 {
border: 2px solid black;
margin-left: 500px;
margin-right: 500px;
background-color: grey;
font-size: 20px;
color: red;
}
.span {
font-size: 50px;
color: salmon;
border: 2px solid orangered;
}
</style>
<h1 class="header">QUIZ</h1>
<br />
<div class="main">
<form>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 1</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">1) First Question</p>
<br />
<input type="radio" name="Q1" id="Option-1" value="Option 1" />
<label style="color:white;" for="Option-1">Option 1</label><br />
<br />
<input type="radio" name="Q1" id="Option-2" value="Option 2" />
<label style="color:white;" for="Option-2">Option 2</label><br />
<br />
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 2</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">2) Second Question</p>
<br />
<input type="radio" name="Q2" id="Option-3" value="Option 1" />
<label style="color:white;" for="Option-3">Option 1</label><br />
<br />
<input type="radio" name="Q2" id="Option-4" value="Option 2" />
<label style="color:white;" for="Option-4">Option 2</label><br />
<br />
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 3</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">3) Third Question</p>
<br />
<input type="radio" name="Q3" id="Option-5" value="Option 1" />
<label style="color:white;" for="Option-5">Option 1</label><br />
<br />
<input type="radio" name="Q3" id="Option-6" value="Option 2" />
<label style="color:white;" for="Option-6">Option 2</label><br />
<br />
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 4</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">4) Fourth Question</p>
<br />
<input type="radio" name="Q4" id="Option-7" value="Option 1" />
<label style="color:white;" for="Option-7">Option 1</label><br />
<br />
<input type="radio" name="Q4" id="Option-8" value="Option 2" />
<label style="color:white;" for="Option-8">Option 2</label><br />
<br />
<br /><br />
</div>
<div style="text-align:center">
<input type="submit" value="Submit" style="font-size:20px;" id="submit_button" />
</div>
</form>
</div>
<div class="result" style="text-align: center;">
<h1 class="result1">Warning!! Clicking Submit will display the Result</h1>
<p style="font-size: 40px;color:green;">You have scored <span class="span"> 0% </span></p>
</div>
<script>
const correctAnswers = ['Option 1', 'Option 2', 'Option 2', 'Option 1'];
const form = document.querySelector('form');
let score = 0;
form.addEventListener('submit', e => {
e.preventDefault();
const userAnswers = [form.Q1.value, form.Q2.value, form.Q3.value, form.Q4.value];
userAnswers.forEach((answer, index) => {
if (answer == correctAnswers[index]) {
score += 20;
}
console.log(score);
});
const result = document.querySelector('.result');
result.querySelector('span').textContent = `${score}`;
});
</script>
</body>
</html>

Change the value of a variable when an image is selected

I want to select one image among four of them. And then the variable that i have should be increased. If i select other image then the variable should change and take the value of that image. Here is the code i have so far that does not work
HTML
<div class="checkbox">
<input type="checkbox" name="paroxi" value="10"><br>
</div>
CSS
.checkbox{
width: 23px;
height: 21px;
background: black;
visibility:hidden;
}
.checked{
background: red;
visibility:block;
}
JAVASCRIPT
$(".checkbox").click(function(){
$(this).toggleClass('checked')
});

If you wanna keep the checkboxes, guess to post price value later, than you can do it this way:
$('.image-selection input').on('change', function(e) {
$('.selected-value').text( $('.image-selection input:checked').val() );
}).trigger('change');
.image-selection input {
display: none;
}
.image-selection input:checked + img {
box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-selection">
<label for="checkbox-1">
<input id="checkbox-1" name="image-input" type="radio" value="10" checked="checked" />
<img src="http://placehold.it/150x150" />
</label>
<label for="checkbox-2">
<input id="checkbox-2" name="image-input" type="radio" value="20" />
<img src="http://placehold.it/150x150" />
</label>
<label for="checkbox-3">
<input id="checkbox-3" name="image-input" type="radio" value="30" />
<img src="http://placehold.it/150x150" />
</label>
<label for="checkbox-4">
<input id="checkbox-4" name="image-input" type="radio" value="40" />
<img src="http://placehold.it/150x150" />
</label>
</div>
<p>Price: <span class="selected-value"></span></p>
Also on JSFiddle.

How to count number of checkboxes selected, change background after selected, and have hover continue to work

I want to create a list of checkboxes that users can select, however, limit the number of checkboxes to 5, as well as show the user how many they have currently clicked.
I also want to change the background color of the checkbox labels after they have been selected.
My main problem is that the number showing how many checkboxes have been selected is always one click behind. Also, the background color is changing after being selected, but the hover call stops working if selected.
Finally, I'd love to hear any suggestions on how to make my count function cleaner. I don't like having 7 if statements...
$(document).ready(function() {
$("input[name='group_option[]']").change(function() {
var maxAllowed = 5;
var cnt = $("input[name='group_option[]']:checked").length;
if (cnt > maxAllowed) {
$(this).prop("checked", "");
}
});
});
function count() {
var count = 0;
if ($('#checkbox1').is(':checked')) {
count = count + 1;
}
if ($('#checkbox2').is(':checked')) {
count = count + 1;
}
if ($('#checkbox3').is(':checked')) {
count = count + 1;
}
if ($('#checkbox4').is(':checked')) {
count = count + 1;
}
if ($('#checkbox5').is(':checked')) {
count = count + 1;
}
if ($('#checkbox6').is(':checked')) {
count = count + 1;
}
if ($('#checkbox7').is(':checked')) {
count = count + 1;
}
document.getElementById("count").innerHTML = count + "/5 Selected";
}
.options {
background-color: #e6e6e6;
display: block;
width: 300px;
margin-left: 20px;
padding: 2px;
margin-bottom: 1px;
}
.options:hover {
color: black;
cursor: pointer;
transition-duration: .15s;
background-color: #b3b3b3;
}
input {
float: left;
}
label:hover {
background-color: #bfbfbf;
}
input[type=checkbox]:checked + label {
background-color: #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<b id="count" style="float: left;">0/5 Selected</b>
<br>
<br>
<input id="checkbox1" type="checkbox" name="group_option[]" value="option1" />
<label for="checkbox1" class="options" onclick="count(this)"> Option 1</label>
<input id="checkbox2" type="checkbox" name="group_option[]" value="option2" />
<label for="checkbox2" class="options" onclick="count(this)"> Option 2</label>
<input id="checkbox3" type="checkbox" name="group_option[]" value="option3" />
<label for="checkbox3" class="options" onclick="count(this)"> Option 3</label>
<input id="checkbox4" type="checkbox" name="group_option[]" value="option4" />
<label for="checkbox4" class="options" onclick="count(this)"> Option 4</label>
<input id="checkbox5" type="checkbox" name="group_option[]" value="option5" />
<label for="checkbox5" class="options" onclick="count(this)"> Option 5</label>
<input id="checkbox6" type="checkbox" name="group_option[]" value="option6" />
<label for="checkbox6" class="options" onclick="count(this)"> Option 6</label>
<input id="checkbox7" type="checkbox" name="group_option[]" value="option7" />
<label for="checkbox7" class="options" onclick="count(this)"> Option 7</label>

There's no need for your separate count() function as you can do all the required processing in your jQuery change event handler (and on* event attributes are considered outdated and should avoided anyway). You already have the cnt variable stored there which you can use. Try this:
$(document).ready(function() {
var maxAllowed = 5;
$("input[name='group_option[]']").change(function() {
var cnt = $("input[name='group_option[]']:checked").length;
if (cnt > maxAllowed)
$(this).prop("checked", false);
else
$('#count').text(cnt + '/5 Selected');
});
});
.options {
background-color: #e6e6e6;
display: block;
width: 300px;
margin-left: 20px;
padding: 2px;
margin-bottom: 1px;
}
.options:hover {
color: black;
cursor: pointer;
transition-duration: .15s;
background-color: #b3b3b3;
}
input {
float: left;
}
input:checked + label {
background-color: #cccccc;
}
input:checked + label:hover {
background-color: #bfbfbf;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<b id="count" style="float: left;">0/5 Selected</b><br><br>
<input id="checkbox1" type="checkbox" name="group_option[]" value="option1" />
<label for="checkbox1" class="options"> Option 1</label>
<input id="checkbox2" type="checkbox" name="group_option[]" value="option2" />
<label for="checkbox2" class="options"> Option 2</label>
<input id="checkbox3" type="checkbox" name="group_option[]" value="option3" />
<label for="checkbox3" class="options"> Option 3</label>
<input id="checkbox4" type="checkbox" name="group_option[]" value="option4" />
<label for="checkbox4" class="options"> Option 4</label>
<input id="checkbox5" type="checkbox" name="group_option[]" value="option5" />
<label for="checkbox5" class="options"> Option 5</label>
<input id="checkbox6" type="checkbox" name="group_option[]" value="option6" />
<label for="checkbox6" class="options"> Option 6</label>
<input id="checkbox7" type="checkbox" name="group_option[]" value="option7" />
<label for="checkbox7" class="options"> Option 7</label>

because of the CSS tag and for the anecdote, here is a CSS possibility :
// no need of javascript here, it is a CSS demo
form {
display: table;
}
label {
display: block;
margin-left: 20px;
position: relative;
padding: 0.25em 1em 0 0;
background: lightgray;
margin-bottom: 1px;
}
label[for^="checkbox"]:after {/* select the labels to use to draw a checkbox*/
content: '';
position: absolute;
right: 100%;
display: inline-block;
line-height: 9px;
height: 11px;
width: 11px;
margin: 2px 5px 0 0;
border: solid 1px #999;
box-shadow: inset 0 0 0 1px white, inset 0 0 1px 1px gray;
background: linear-gradient(to bottom right, gray, white 75%)
}
/* update checkbox colors on hover/checked */
#checkbox1:checked ~ label[for="checkbox1"]:after,
#checkbox2:checked ~ label[for="checkbox2"]:after,
#checkbox3:checked ~ label[for="checkbox3"]:after,
#checkbox4:checked ~ label[for="checkbox4"]:after,
#checkbox5:checked ~ label[for="checkbox5"]:after,
#checkbox6:checked ~ label[for="checkbox6"]:after,
#checkbox7:checked ~ label[for="checkbox7"]:after,
label:hover:after {
border: solid 1px #5586A3;
box-shadow: inset 0 0 0 1px white, inset 0 0 0 2px #9FD7F9;
background: linear-gradient(to bottom right, #7AB6DB, white 75%)
}
/* about time to hide imputs cloned in CSS */
[name^="group_option"] {
position: absolute;
right: 100%;
}
/* trigger the checkmark when checked */
#checkbox1:checked ~ label[for="checkbox1"]:after,
#checkbox2:checked ~ label[for="checkbox2"]:after,
#checkbox3:checked ~ label[for="checkbox3"]:after,
#checkbox4:checked ~ label[for="checkbox4"]:after,
#checkbox5:checked ~ label[for="checkbox5"]:after,
#checkbox6:checked ~ label[for="checkbox6"]:after,
#checkbox7:checked ~ label[for="checkbox7"]:after {
content: '\2714';
color: #223C82;
}
/* disallow option when 5 is reached */
[name^="group_option"]:checked ~[name^="group_option"]:checked ~[name^="group_option"]:checked ~[name^="group_option"]:checked ~[name^="group_option"]:checked ~ label {
pointer-events:none;
color:gray;
}
/* but allow to unchecked if you change yor mind */
label:hover,
#checkbox1:checked ~ label[for="checkbox1"],
#checkbox2:checked ~ label[for="checkbox2"],
#checkbox3:checked ~ label[for="checkbox3"],
#checkbox4:checked ~ label[for="checkbox4"],
#checkbox5:checked ~ label[for="checkbox5"],
#checkbox6:checked ~ label[for="checkbox6"],
#checkbox7:checked ~ label[for="checkbox7"] {
pointer-events:auto;
color:initial;
background: gray;
cursor:pointer;
}
/* add infos */
b {
display: block;
text-align: center
}
form {
counter-reset: checked;
}
input:checked {
counter-increment: checked;
}
b:before {
content: counter(checked);
}
b:after {
content: '5'
}
<form>
<!-- input linked to labels to be hidden -->
<input id="checkbox1" type="checkbox" name="group_option[]" value="option1" />
<input id="checkbox2" type="checkbox" name="group_option[]" value="option2" />
<input id="checkbox3" type="checkbox" name="group_option[]" value="option3" />
<input id="checkbox4" type="checkbox" name="group_option[]" value="option4" />
<input id="checkbox5" type="checkbox" name="group_option[]" value="option5" />
<input id="checkbox6" type="checkbox" name="group_option[]" value="option6" />
<input id="checkbox7" type="checkbox" name="group_option[]" value="option7" />
<!-- end hidden input linked to labels -->
<b>/</b>
<!-- label using pseudo to draw the checkbox -->
<label for="checkbox1" class="options"> Option 1</label>
<label for="checkbox2" class="options"> Option 2</label>
<label for="checkbox3" class="options" > Option 3</label>
<label for="checkbox4" class="options"> Option 4</label>
<label for="checkbox5" class="options"> Option 5</label>
<label for="checkbox6" class="options"> Option 6</label>
<label for="checkbox7" class="options"> Option 7</label>
<!-- end label using pseudo to draw the checkbox -->
<form>
demo to play with

The answer is at line 4 of your own code...
function count() {
var cnt = $("input[name='group_option[]']:checked").length;
document.getElementById("count").innerHTML = cnt + "/5 Selected";
}

To answer the second part of your question first: the reason your losing the :hover state on the labels is due to CSS specificity; you have the rule for a label following a :checked input after the rule for a hovered label, so the latter is being overridden. But the selector for the :checked rule has a higher specficity than the one for the :hover rule so simply changing the order of those two rules won't be enough, you'll also need to increase the specificity of the :hover rule.
The rest of your problems can be solved by addressing the last part of your question; simplifying your JavaScript. One way to do so would be to loop through all the inputs and listen for the change event on each, incrementing or decrementing the value of the count variable, depending on the checbox's status and the checking the value of count is not greater than 5.
I've added the ability to have some checkboxes initially checked and also taken the liberty of simplfying how you update the counter element and adding some CSS to make unchecked checkboxes & their labels appear disabled once 5 options have been selected in order to make it clearer that no more options can be selected.
var inputs=document.querySelectorAll("input.options"),
length=inputs.length,
counter=document.querySelector("#count>span"),
dataset=counter.parentNode.dataset,
count=0,input,max=5;
while(length--){
input=inputs[length];
count+=input.checked;
input.addEventListener("change",function(event){
count+=this.checked&&1||-1;
if(count>max){
this.checked=0;
count--;
}
dataset.count=counter.innerHTML=count;
},0);
}
dataset.count=counter.innerHTML=count;
*{box-sizing:border-box;font-family:sans-serif;}
#count{
font-weight:bold;
margin:0 0 20px;
}
input.options{
clear:left;
float:left;
}
label.options{
background:#e6e6e6;
cursor:pointer;
display:block;
margin:0 0 1px 20px;
padding:2px 2px 2px 20px;
transition:background .15s;
width:300px;
}
input.options:checked+label.options{
background:#ccc;
}
input.options+label.options:hover{
background:#bfbfbf;
}
#count[data-count="5"]~input.options:not(:checked),#count[data-count="5"]~input.options:not(:checked)+label.options{
opacity:.5;
pointer-events:none;
}
<p id="count"><span>0</span>/5 Selected</p>
<input class="options" id="checkbox1" name="group_option[]" type="checkbox" value="option1" />
<label class="options" for="checkbox1">Option 1</label>
<input class="options" id="checkbox2" name="group_option[]" type="checkbox" value="option2" />
<label class="options" for="checkbox2">Option 2</label>
<input class="options" id="checkbox3" name="group_option[]" type="checkbox" value="option3" />
<label class="options" for="checkbox3">Option 3</label>
<input checked class="options" id="checkbox4" name="group_option[]" type="checkbox" value="option4" />
<label class="options" for="checkbox4">Option 4</label>
<input class="options" id="checkbox5" name="group_option[]" type="checkbox" value="option5" />
<label class="options" for="checkbox5">Option 5</label>
<input class="options" id="checkbox6" name="group_option[]" type="checkbox" value="option6" />
<label class="options" for="checkbox6">Option 6</label>
<input class="options" id="checkbox7" name="group_option[]" type="checkbox" value="option7" />
<label class="options" for="checkbox7">Option 7</label>