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);
});
});

Why my functionality doesn't work after conditionally innerHTML?

I have a few checkboxes which represent subjects. And I have two custom(radio) select. I want to change innerHTML of my first select due to checkbox:checked length. If selected chekboxes length less than 3 I want to render different select options else another select options. When page load it works fine but after recheck my checkboxes I can not select any option from my first chekbox. Can someone please look at and help me
codepen link is also here
function subjectChange (){
var subjectName = document.getElementsByName('subject-name');
var questionSel = document.getElementsByClassName('options-container')[0];
var checkBoxlength = 0;
for(var i = 0; i < subjectName.length; i++) {
if(subjectName[i].checked){
checkBoxlength++
}
}
if(checkBoxlength <= 3) {
questionSel.innerHTML = `
<label class="option">
<input type="radio" class="radio first" value="5" name="question" checked>
<span>5</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="10" name="question" checked>
<span>10</span>
</label>
`;
} else if(checkBoxlength >= 4) {
questionSel.innerHTML = `
<label class="option">
<input type="radio" class="radio first" value="5" name="question" checked>
<span>5</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="10" name="question" checked>
<span>10</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="15" name="question" checked>
<span>15</span>
</label>
`;
}
}
const selectBox = document.querySelectorAll('.select-box')
for(var i = 0; i < selectBox.length; i++) {
const selected = selectBox[i].querySelector('.selected');
const optionsContainer = selectBox[i].querySelector('.options-container');
const optionList = selectBox[i].querySelectorAll('.option');
selected.addEventListener('click', function(){
optionsContainer.classList.toggle("active");
})
optionList.forEach( o => {
var optionListItem= o.querySelectorAll('input[type="radio"]:checked + span');
optionListItem.forEach(e => selected.innerHTML = e.innerHTML)
o.addEventListener('click', function(){
var optionListItem= o.querySelectorAll('input[type="radio"]:checked + span');
optionListItem.forEach(e => selected.innerHTML = e.innerHTML)
optionsContainer.classList.remove('active')
var firstOptionList = document.querySelector('input[type="radio"]:checked');
var secondOptionList = document.querySelectorAll('.radio.second');
secondOptionList.forEach(e => {
e.removeAttribute('checked')
if(e.value == (firstOptionList.value * 2)){
//e.checked = true;
e.setAttribute('checked','');
var optionListItem2= document.querySelectorAll('input[type="radio"]:checked + span');
const selectedTwo = document.getElementsByClassName('selected');
optionListItem2.forEach(e => selectedTwo[1].innerHTML = e.innerHTML);
console.log(e)
}
})
})
})
}
.select-box {
display: flex;
flex-direction: column;
width: 400px;
}
.select-box .options-container {
background: cornflowerblue;
color: white;
max-height: 0;
width: 100%;
opacity: 0;
transition: all .3s;
border-radius: 8px;
overflow: hidden;
order: 1;
}
.selected {
background: cornflowerblue;
color: white;
border-radius: 8px;
margin-bottom: 8px;
position: relative;
order: 0;
}
.selected::after {
content: '';
background: url('./arrow-down.svg');
background-size: contain;
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 18px;
right: 10px;
top: 40%;
transform: all .3s;
}
.select-box .option {
display: flex;
}
.select-box .option,
.selected {
padding: 12px 24px;
cursor: pointer;
}
.select-box span {
cursor: pointer;
}
.select-box .option:hover {
background: crimson;
}
.select-box .option .radio {
display: none;
}
.select-box .options-container.active {
max-height: 200px;
opacity: 1;
overflow-y: scroll;
}
.select-box .options-container.active + .selected::after {
transform: rotateX(-180deg);
top: -40%;
}
.select-box .options-container::-webkit-scrollbar {
width: 8px;
background: green;
border-radius: 0 8px 8px 0;
}
.select-box .options-container::-webkit-scrollbar-thumb {
background: red;
border-radius: 0 8px 8px 0;
}
<div class="subject-container">
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox1" checked />
<label for="checkbox1">USA</label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox2" checked />
<label for="checkbox2">Canada</label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox3" checked />
<label for="checkbox3">Germany</label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox4" checked />
<label for="checkbox4">France </label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox5" checked />
<label for="checkbox5">Italy</label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox6" checked />
<label for="checkbox6">China</label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox7" checked />
<label for="checkbox7">Japan</label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox8" checked />
<label for="checkbox8">India</label>
</div>
</div>
<form action="">
<div class="select-box">
<div class="options-container">
<label class="option">
<input type="radio" class="radio first" value="5" name="question">
<span>5</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="10" name="question">
<span>10</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="15" name="question" >
<span>15</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="20" name="question">
<span>20</span>
</label>
</div>
<div class="selected">Number of question</div>
</div>
<div class="select-box">
<div id="second-list" class="options-container">
<label class="option">
<input type="radio" class="radio second" value="10" name="minutes">
<span>10 minutes</span>
</label>
<label class="option">
<input type="radio" class="radio second" value="20" name="minutes" >
<span>20 minutes</span>
</label>
<label class="option">
<input type="radio" class="radio second" value="30" name="minutes">
<span>30 minutes</span>
</label>
<label class="option">
<input type="radio" class="radio second" value="40" name="minutes">
<span>40 minutes</span>
</label>
</div>
<div id="selected" class="selected">Select Exam Minute</div>
</div>
<button type="submit">Submit</button>
</form>
?

In your javascript you have added eventListeners to all the select options when your page is loaded at first. But when you call the 'subjectChange' function, the innerHTMl is changed and new elements are added to your page but these new elements do not have eventListeners attached to them. You need to attach eventListeners to these elements as well. Like this :
function subjectChange (){
var subjectName = document.getElementsByName('subject-name');
var questionSel = document.getElementsByClassName('options-container')[0];
var checkBoxlength = 0;
for(var i = 0; i < subjectName.length; i++) {
if(subjectName[i].checked){
checkBoxlength++
}
}
if(checkBoxlength <= 3) {
questionSel.innerHTML = `
<label class="option">
<input type="radio" class="radio first" value="5" name="question" checked>
<span>5</span>
< /label>
<label class="option">
<input type="radio" class="radio first" value="10" name="question" checked>
<span>10</span>
</label>
`;
} else if(checkBoxlength >= 4) {
questionSel.innerHTML = `
<label class="option">
<input type="radio" class="radio first" value="5" name="question" checked>
<span>5</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="10" name="question" checked>
<span>10</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="15" name="question" checked>
<span>15</span>
</label>
`;
}
start(); //this will add eventListeners to all the elements again
}
function start(){
const selectBox = document.querySelectorAll('.select-box')
for(var i = 0; i < selectBox.length; i++) {
const selected = selectBox[i].querySelector('.selected');
const optionsContainer = selectBox[i].querySelector('.options-container');
const optionList = selectBox[i].querySelectorAll('.option');
selected.addEventListener('click', function(){
optionsContainer.classList.toggle("active");
})
optionList.forEach( o => {
var optionListItem= o.querySelectorAll('input[type="radio"]:checked + span');
optionListItem.forEach(e => selected.innerHTML = e.innerHTML)
o.addEventListener('click', function(){
var optionListItem= o.querySelectorAll('input[type="radio"]:checked + span');
optionListItem.forEach(e => selected.innerHTML = e.innerHTML)
optionsContainer.classList.remove('active')
var firstOptionList = document.querySelector('input[type="radio"]:checked');
var secondOptionList = document.querySelectorAll('.radio.second');
secondOptionList.forEach(e => {
e.removeAttribute('checked')
if(e.value == (firstOptionList.value * 2)){
//e.checked = true;
e.setAttribute('checked','');
var optionListItem2= document.querySelectorAll('input[type="radio"]:checked + span');
const selectedTwo = document.getElementsByClassName('selected');
optionListItem2.forEach(e => selectedTwo[1].innerHTML = e.innerHTML);
console.log(e)
}
})
})
})
}
}
start();

jQuery not reacting to number input

I have this code, where if I fill in specific input fields then it will 'enable' or in this case remove a class but when it comes to filling in an input field of a number it won't react to the input value of the number what is filled. I want it to when something is filled in then enable the button.
I'm setting up a validation that when not all the fields are filled in, you can't go to the next page but before that you need to fill in all the fields.
HTML
<input id="LAMINAAT" type="radio" name="group1" onclick="myFunction()"
value="Laminaat" />
<label for="LAMINAAT">Laminaat</label>
<input id="PARKET" type="radio" name="group1" onclick="myFunction()" value="Parket" />
<label for="PARKET">Parket</label>
<input id="PVC" type="radio" name="group1" onclick="myFunction()" value="Pvc" />
<label for="PVC">PVC</label>
<hr>
<input id="JA2" type="radio" name="group3" value="Ja">
<label for="JA2" class="form-field__radio__label">Ja, meerprijs €1.50 per m<sup>2</sup></label><br>
<input id="NEE2" type="radio" name="group3" onclick="JaNeeFirst()" value="Nee">
<label for="NEE2">Nee</label>
<div id="form_JA2" class="desc desc3" style="float: inherit;">
<h5>Hoeveel m<sup>2</sup> ondervloer wil je laten leggen?</h5>
<input type="number" id="ondervloer" name="ondervloeren">
</div>
<hr>
<input id="JA3" type="radio" name="group4" value="Ja">
<label for="JA3" class="form-field__radio__label">Ja</label><br>
<input id="NEE3" type="radio" name="group4" onclick="JaNeeSecond()" value="Nee">
<label for="NEE3">Nee</label>
<hr>
<input id="JA4" type="radio" name="group5" value="Ja">
<label for="JA4" class="form-field__radio__label">Ja, meerprijs €5.00 per meter</label><br>
<input id="NEE4" type="radio" name="group5" onclick="JaNeeThirth()" value="Nee">
<label for="NEE4">Nee</label>
<hr>
<input id="JA5" type="radio" name="group6" value="Ja">
<label for="JA5" class="form-field__radio__label">Ja, meerprijs €2.50 per m<sup>2</sup></label><br>
<input id="NEE5" type="radio" name="group6" onclick="JaNeeFourth()" value="Nee">
<label for="NEE5">Nee</label>
<hr>
<input id="JA6" type="radio" name="group7" value="Ja">
<label for="JA6" class="form-field__radio__label">Ja, meerprijs €20.00 per deur</label><br>
<input id="NEE6" type="radio" name="group7" onclick="JaNeeFifth()" value="Nee">
<label for="NEE6">Nee</label>
<hr>
<input id="JA7" type="radio" name="group8" value="Ja">
<label for="JA7" class="form-field__radio__label">Ja, meerprijs €20.00 per plint</label><br>
<input id="NEE7" type="radio" name="group8" onclick="JaNeeSixth()" value="Nee">
<label for="NEE7">Nee</label>
<hr>
<input id="tweedebutton" type="button" value="volgende stap" onclick="show_next('user_details','qualification','bar2'); topFunction()" />
jQuery
$(document).ready(function () {
$("#tweedebutton").addClass("disabledbuttonNext");
$('input[type="radio"]').on('change', function () {
if ($('#LAMINAAT').is(":checked") && $('input[name="group3"]').is(":checked") && $('input[name="group4"]').is(":checked") && $('input[name="group5"]').is(":checked") && $('input[name="group7"]').is(":checked") && $('input[name="group8"]').is(":checked") ) {
$("#tweedebutton").removeClass("disabledbuttonNext");
} else if ($('#PARKET').is(":checked") && $('input[name="group3"]').is(":checked") && $('input[name="group4"]').is(":checked") && $('input[name="group5"]').is(":checked") && $('input[name="group7"]').is(":checked") && $('input[name="group8"]').is(":checked") && $('input[name="group6"]').is(":checked") ){
$("#tweedebutton").removeClass("disabledbuttonNext");
} else if ($('#PVC').is(":checked") && $('input[name="group3"]').is(":checked") && $('input[name="group4"]').is(":checked") && $('input[name="group5"]').is(":checked") && $('input[name="group7"]').is(":checked") && $('input[name="group8"]').is(":checked") ) {
$("#tweedebutton").removeClass("disabledbuttonNext");
}
else{
$("#tweedebutton").addClass("disabledbuttonNext");
}
});
});
$(document).ready(function () {
$('input[type="radio"], input[type="number"]').on('change', function () {
if ( $('#JA2').is(":checked") && $('#ondervloer').val() == '' ) {
$("#tweedebutton").addClass("disabledbuttonNext");
}
});
});
CSS
.disabledbuttonNext {
pointer-events: none;
opacity: 0.5;
}
I want the result to be when I filled in everything and I filled something in the number input(example: '1') that it reacts to it immediately and enables the button or in this case adds a class.

Here's the code similar for your application.
It interacts with both "radio buttons" as well as "input box" & accordingly triggers the "Submit button".
function checkout() {
alert("It worked");
}
$(document).ready(function() {
//console.log("Document loaded !");
$("input").change(function() {
var snacksValue = $('input[name="snacks"]:checked').val();
var extrasValue = $('input[name="extras"]:checked').val();
var quantity = $('#input1').val();
if (snacksValue != undefined && extrasValue != undefined && quantity != '') {
//console.log("go");
$('#checkout').removeClass("disabled");
$('#checkout').addClass("enabled");
} else {
//console.log("error");
$('#checkout').removeClass("enabled");
$('#checkout').addClass("disabled");
}
});
});
div {
margin: 10px 5px;
}
.enabled {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.disabled {
background-color: #e7e7e7;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
pointer-events: none;
/* display:none; */
/* If you wanna hide it */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>
<input type="radio" name="snacks" value="burger" />
Burger</label>
<label>
<input type="radio" name="snacks" value="pizza" />Pizza</label>
<label>
<input type="radio" name="snacks" value="hotdog" /> Hotdog</label>
</div>
<div>
<label>
<input id="extra1" type="radio" name="extras" value="cheese">
With Cheese</label>
<label>
<input id="extra2" type="radio" name="extras" value="nocheese">
Without Cheese</label>
</div>
<div>
<label>Quantity</label>
<input id="input1" type="number" value="" min=1>
</div>
<div>
<input id="checkout" class="disabled" type="button" value="Next" onclick="checkout();" />
</div>

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>

Checkbox: uncheck when on another is checked

I'm trying to use this function to uncheck a checkbox when another one is checked:
<script>
$('input.unchecked').on('change', function() {
$('input.unchecked').not(this).prop('checked', false);
});
</script>
<script>
$("#checkboxID").change(function(){
$("#tableID tr.rowEG").toggle(!this.checked);
});
$("#checkbox1OG").change(function(){
$("#tableID tr.row1OG").toggle(!this.checked);
});
$("#checkbox2OG").change(function(){
$("#tableID tr.row2OG").toggle(!this.checked);
});
$("#checkbox3OG").change(function(){
$("#tableID tr.row3OG").toggle(!this.checked);
});
</script>
But does not works, because when you check another checkbox the table content disappears.
This is the HTML code:
<form class="filter">
<input type="checkbox" id="checkboxID" class="unchecked"> EG
<input type="checkbox" id="checkbox1OG" class="unchecked"> 1.OG
<input type="checkbox" id="checkbox2OG" class="unchecked"> 2.OG
<input type="checkbox" id="checkbox3OG" class="unchecked"> 3.OG
</form>
And here where I want to use it:
http://develop.nowcommu.myhostpoint.ch/table-test.html
Any ideas?
EDIT:
Maybe this is the problem?
<script>
$("#checkboxID").change(function(){
$("#tableID tr.rowEG").toggle(!this.checked);
});
$("#checkbox1OG").change(function(){
$("#tableID tr.row1OG").toggle(!this.checked);
});
$("#checkbox2OG").change(function(){
$("#tableID tr.row2OG").toggle(!this.checked);
});
$("#checkbox3OG").change(function(){
$("#tableID tr.row3OG").toggle(!this.checked);
});
</script>

Here is a simple solution without the need of script.
input{
display:none;
}
label{
width:25px;
height:25px;
font-size:16px;
cursor:pointer;
position:relative;
padding-left: 30px;
}
label ~ label {
margin-left: 40px;
}
label:before,
label:after{
top: 0;
left: 0;
position:absolute;
height:15px;
width:15px;
content:' ';
border-radius: 2px;
border: 1px #3a3a3a solid;
font-weight: bold;
}
input:checked + label:after{
top: -2px;
left: 2px;
content: '\2713';
border: none;
}
<form class="filter">
<input type="radio" name="radio" id="radio"><label for="radio"> EG </label>
<input type="radio" name="radio" id="radio1"><label for="radio1"> 1.OG </label>
<input type="radio" name="radio" id="radio2"><label for="radio2"> 2.OG </label>
<input type="radio" name="radio" id="radio3"><label for="radio3"> 3.OG </label>
</form>

See the fiddle:
https://jsfiddle.net/61eywpzg/
HTML
<form class="filter">
<input type="checkbox" id="checkboxID" class="unchecked"> EG
<input type="checkbox" id="checkbox1OG" class="unchecked"> 1.OG
<input type="checkbox" id="checkbox2OG" class="unchecked"> 2.OG
<input type="checkbox" id="checkbox3OG" class="unchecked"> 3.OG
</form>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
jQuery
$('input.unchecked').on('change', function() {
$('input.unchecked').not(this).prop('checked', false);
});

Try the below snippet:
$('.unchecked').click(function(){
$(this).siblings().prop("checked",false)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="filter">
<input type="checkbox" id="checkboxID" class="unchecked"> EG
<input type="checkbox" id="checkbox1OG" class="unchecked"> 1.OG
<input type="checkbox" id="checkbox2OG" class="unchecked"> 2.OG
<input type="checkbox" id="checkbox3OG" class="unchecked"> 3.OG
</form>

You can use radio buttons instead of checkboxes.
To do this, change the type of your input to radio, example:
<input type="radio" id="checkboxID" class="unchecked">