We Keep Coding

How to show the order number in which the checkboxes are clicked?

I am trying to output the order number in which the checkboxes are checked. Whichever checkbox is checked first should show "a" beside it, whichever is checked second should show "b" beside it and so on.. Can anyone help?
<ul class="dropdown-content checkboxes">
<li>
<label>
<input type="checkbox" />
Billy
</label>
</li>
<li>
<label>
<input type="checkbox" />
Jacob
</label>
</li>
<li>
<label>
<input type="checkbox" />
Bob
</label>
</li>
<li>
<label>
<input type="checkbox" />
Alexandren
</label>
</li>
<li>
<label>
<input type="checkbox" />
Erren
</label>
</li>
<li>
<label>
<input type="checkbox" />
Stewgart
</label>
</li>
<li>
<label>
<input type="checkbox" />
Jillian
</label>
</li>
<li>
<label>
<input type="checkbox" />
Other
</label>
</li>
</ul>

You can add checked checkboxes at the end of an array, and remove them when get unchecked. By doing so, it will automatically adjust letters on checked boxes like so:
const cb = document.querySelectorAll('ul.checkboxes input[type="checkbox"]');
const order = [];
const onInput = e =>
{
const data = e.target;
const index = order.indexOf(data);
if (index != -1)
order.splice(index, 1);
if (e.target.checked)
order[order.length] = data;
for(let i = 0; i < cb.length; i++)
{
const index = order.indexOf(cb[i]);
cb[i].parentNode.setAttribute("num", String.fromCharCode(65 + index));
}
}
for(let i = 0; i < cb.length; i++)
cb[i].addEventListener("input", onInput);
.checkboxes label[num]:not([num = "#"]):before
{
content: attr(num);
}
.checkboxes label:before
{
content: "";
width: 1em;
display: inline-block;
}
<ul class="dropdown-content checkboxes">
<li>
<label>
<input type="checkbox" />Billy</label>
</li>
<li>
<label>
<input type="checkbox" />Jacob</label>
</li>
<li>
<label>
<input type="checkbox" />Bob</label>
</li>
<li>
<label>
<input type="checkbox" />Alexandren</label>
</li>
<li>
<label>
<input type="checkbox" />Erren</label>
</li>
<li>
<label>
<input type="checkbox" />Stewgart</label>
</li>
<li>
<label>
<input type="checkbox" />Jillian</label>
</li>
<li>
<label>
<input type="checkbox" />Other</label>
</li>

This keeps track of the order of items clicked in an array. When one is deselected, it splices the array and reorders the alphabet letters according to the order of the array
let alpha = 'abcdefghijklmnopqrstuvwxyz'.split('');
document.querySelectorAll('li').forEach(el => {
el.innerHTML += '<span class="letter"> </span>'
})
let checkedItems=[]
document.querySelectorAll('[type=checkbox]').forEach(el => {
el.value = el.closest('label').innerText.trim()
el.addEventListener('change', e => {
let n = el.closest('label').innerText.trim();
if (!e.target.checked) checkedItems.splice(checkedItems.indexOf(n),1)
else checkedItems.push(n);
document.querySelectorAll('.letter').forEach( l=> l.innerHTML = '')
checkedItems.forEach((n,i) => {
document.querySelector(`input[value=${n}]`).closest('li').querySelector('.letter').innerHTML = alpha[i]
})
});
});
.letter {
display: inline-block;
color: #333;
font-weight:bold;
padding: 2px 4px;
margin-left: 5px;
}
<ul class="dropdown-content checkboxes">
<li>
<label>
<input type="checkbox" />Billy</label>
</li>
<li>
<label>
<input type="checkbox" />Jacob</label>
</li>
<li>
<label>
<input type="checkbox" />Bob</label>
</li>
<li>
<label>
<input type="checkbox" />Alexandren</label>
</li>
<li>
<label>
<input type="checkbox" />Erren</label>
</li>
<li>
<label>
<input type="checkbox" />Stewgart</label>
</li>
<li>
<label>
<input type="checkbox" />Jillian</label>
</li>
<li>
<label>
<input type="checkbox" />Other</label>
</li>

You set the value for each checkbox.
<input type="checkbox" value="1" />
Whenever it will be checked, it can trigger an event and you can get the value.
$("#checkbox").change(function(){
var checked = $(this).is(":checked");
var value = $(this).val();
});

Checking checkboxes in jquery validation

I have several rows of checkboxes. The scenario is that when I click a checkbox in the first row, and when I click another checkbox in the second or third row and within the same column, the previous checked checkbox is unchecked and the new one is checked. This is working fine. My issue is that when I uncheck the newly checked checkbox, it should re-check the previous checkbox checked. Anyone who can help me with this please ?
The demo is as per below.
$('.js-cars-item [type="checkbox"]').change(function() {
var idx = $(this).closest('li').index(); //Get the index - Number in order
var chk = $(this).is(":checked"); //Get if checked or not
var obj = this; //Checkbox object
$('.js-cars-item').each(function() { //Loop every js-cars-item
//Find the checkbox with the same index of clicked checkbox. Change disabled property
$(this).find('li:eq(' + idx + ') [type="checkbox"]').not(obj).prop("checked", false);
});
var checkeds = [];
$(".cars-item input:checkbox:checked").each(function(index) {
checkeds[index] = $(this).attr('id');
});
console.clear();
console.log("These are checked:", checkeds);
})
.cars-item {
border-bottom: 1px solid gray;
}
ul {
/* Added to fully show console in snippet */
margin: 2px;
}
li {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-3">
<label for="car-1-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-3">
<label for="car-2-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-3">
<label for="car-3-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-3">
<label for="car-4-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-3">
<label for="car-5-3"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-4">
<label for="car-1-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-4">
<label for="car-2-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-4">
<label for="car-3-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-4">
<label for="car-4-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-4">
<label for="car-5-4"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-5">
<label for="car-1-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-5">
<label for="car-2-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-5">
<label for="car-3-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-5">
<label for="car-4-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-5">
<label for="car-5-5"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-6>
<label for="car-1-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-6">
<label for="car-2-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-6">
<label for="car-3-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-6">
<label for="car-4-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-6">
<label for="car-5-6"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-7>
<label for="car-1-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-7">
<label for="car-2-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-7">
<label for="car-3-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-7">
<label for="car-4-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-7">
<label for="car-5-7"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-8">
<label for="car-1-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-8">
<label for="car-2-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-8">
<label for="car-3-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-8">
<label for="car-4-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-8">
<label for="car-5-8"><i class="icon-tick"></i></label>
</li>
</ul>
</div>

I have updated your javascript code, please try this:
$('.js-cars-item [type="checkbox"]').change(function() {
var idx = $(this).closest('li').index(); //Get the index - Number in order
var chk = $(this).is(":checked"); //Get if checked or not
var obj = this; //Checkbox object
if(chk)
{ //If it is checked
$('.previous_'+idx).removeClass('previous_'+idx); //Remove the 'previous_$index' class from the checkbox
$('.js-cars-item').find('li:eq(' + idx + ') [type="checkbox"]:checked').not(obj).addClass('previous_'+idx).prop("checked", false); //set the 'previous_$index' class to an existing checked checkbox and remove the checked property
}
else if($('.previous_'+idx).length)
{ //If the 'previous_$index' class is available while uncheck the current checkbox
$('.previous_'+idx).prop("checked", true).removeClass('previous_'+idx); //set the 'previous_$index' class's checkbox to checked and remove this class
$(obj).addClass('previous_'+idx); //set the 'previous_$index' class to the currently unchecked checkbox
}
var checkeds = [];
$(".cars-item input:checkbox:checked").each(function(index) {
checkeds[index] = $(this).attr('id');
});
console.clear();
console.log("These are checked:", checkeds);
})
.cars-item {
border-bottom: 1px solid gray;
}
ul {
/* Added to fully show console in snippet */
margin: 2px;
}
li {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-3">
<label for="car-1-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-3">
<label for="car-2-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-3">
<label for="car-3-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-3">
<label for="car-4-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-3">
<label for="car-5-3"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-4">
<label for="car-1-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-4">
<label for="car-2-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-4">
<label for="car-3-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-4">
<label for="car-4-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-4">
<label for="car-5-4"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-5">
<label for="car-1-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-5">
<label for="car-2-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-5">
<label for="car-3-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-5">
<label for="car-4-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-5">
<label for="car-5-5"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul> </
<li>
<input type="checkbox" id="car-1-6">
<label for="car-1-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-6">
<label for="car-2-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-6">
<label for="car-3-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-6">
<label for="car-4-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-6">
<label for="car-5-6"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-7">
<label for="car-1-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-7">
<label for="car-2-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-7">
<label for="car-3-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-7">
<label for="car-4-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-7">
<label for="car-5-7"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-8">
<label for="car-1-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-8">
<label for="car-2-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-8">
<label for="car-3-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-8">
<label for="car-4-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-8">
<label for="car-5-8"><i class="icon-tick"></i></label>
</li>
</ul>
</div>

CSS - How can i make first row always fixed?

I have an unordered list(<ul>) where i have a few elements. Now in my list at the top I have select all and a Go button. I want Select all and Go button fixed indepedent of the scrollbar. I tried giving position:fixed to the (li) of Select All but when the values increase the position of Select All distorts. Please guide.
.scrollClass {
overflow: auto;
}
.scrollClass select {
border: none;
}
.dropDown, testClass {
padding-left: 0px !important;
z-index: 999999999;
position: absolute;
}
.rowClass {
cursor: pointer;
padding: 5px;
border: 1px solid #94c0d2;
list-style: none;
border-bottom-style: none;
}
<h3>Name</h3>
<ul class="testClass" style=" padding-left:0px; margin-bottom:0px;">
<li>
<input type="text" name="name" id="myText">
</li>
</ul>
<ul class="dropDown" style="max-height:200px; overflow-y:scroll; margin-top:2px;">
<li class="rowClass" style=" max-width:400px; min-width:400px; ">
<label>
<input type="checkbox" id="check" value="0"> Select All
</label>
<input type="button" value="Go" style="float:right;">
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test1
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test2
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test3
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test4
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test5
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test5
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test5
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test5
</label>
</li>
</ul>

Move Select All input field in above <ul> tag
.scrollClass{
overflow: auto;
}
.scrollClass select{
border: none;
}
.dropDown, testClass{
padding-left:0px !important;
z-index:999999999;
position:absolute;
}
.rowClass{
cursor:pointer;
padding:5px;
border:1px solid #94c0d2;
list-style:none;
border-bottom-style:none;
}
<h3>
Name
</h3>
<ul class="testClass" style=" padding-left:0px; margin-bottom:0px;">
<li>
<input type="text" autocomplete="off" name="name" id="myText"/>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" id="chkAll" value="0"/> Select All
</label>
<input type="button" value="Go" style="float:right;"></input>
</li>
</ul>
<ul class="dropDown" style="max-height:200px; overflow-y:scroll; margin-top:2px;">
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"/> Test
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"/> Test1
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"/> Test2
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"/> Test3
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"/> Test4
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"/> Test5
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"/> Test6
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"/> Test7
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"/> Test8
</label>
</li>
</ul>

You could add another ul after the Select All li and modify the inline-styling for it and its parent ul.
ul {padding:0}
.scrollClass {
overflow: auto;
}
.scrollClass select {
border: none;
}
.dropDown, testClass {
padding-left: 0px !important;
z-index: 999999999;
position: absolute;
}
.rowClass {
cursor: pointer;
padding: 5px;
border: 1px solid #94c0d2;
list-style: none;
border-bottom-style: none;
}
<h3>Name</h3>
<ul class="testClass" style="padding-left:0px; margin-bottom:0px;">
<li>
<input type="text" autocomplete="off" name="name" id="myText">
</li>
</ul>
<ul class="dropDown" style="margin-top:2px;">
<li class="rowClass" style="width:400px">
<label>
<input type="checkbox" id="chkAll" value="0"> Select All
</label>
<input type="button" value="Go" style="float:right;">
</li>
<ul style="max-height:200px; overflow-y:scroll;">
<li class="rowClass" style="max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test
</label>
</li>
<li class="rowClass" style="max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test1
</label>
</li>
<li class="rowClass" style="max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test2
</label>
</li>
<li class="rowClass" style="max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test3
</label>
</li>
<li class="rowClass" style="max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test4
</label>
</li>
<li class="rowClass" style="max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test5
</label>
</li>
<li class="rowClass" style="max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test6
</label>
</li>
<li class="rowClass" style="max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test7
</label>
</li>
<li class="rowClass" style="max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test8
</label>
</li>
</ul>
</ul>

though my vote goes to #Satendra but please also Try this
.scrollClass {
overflow: auto;
}
.scrollClass select {
border: none;
}
.dropDown, testClass {
padding-left: 0px !important;
z-index: 999999999;
position: absolute;
}
.rowClass {
cursor: pointer;
padding: 5px;
border: 1px solid #94c0d2;
list-style: none;
border-bottom-style: none;
}
.rowClass:first-child {
position: fixed;
background: #ffffff;
border: 1px solid #94c0d2;
}
<h3>Name</h3>
<ul class="testClass" style=" padding-left:0px; margin-bottom:0px;">
<li>
<input type="text" autocomplete="off" name="name" id="myText">
</li>
</ul>
<ul class="dropDown" style="max-height:200px; overflow-y:scroll; margin-top:2px;">
<li class="rowClass" style=" max-width:400px; min-width:400px; ">
<label>
<input type="checkbox" id="chkAll" value="0"> Select All
</label>
<input type="button" value="Go" style="float:right;">
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test1
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test2
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test3
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test4
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test5
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test5
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test5
</label>
</li>
<li class="rowClass" style=" max-width:400px; min-width:400px;">
<label>
<input type="checkbox" name="allClass" class="checkBoxClass"> Test5
</label>
</li>
</ul>

During onclick event of radio button, hide the validation and check the another radio value to go to next div class using jquery

I have two radio buttons one is Enter your own sizes and another one is Choose your standard size. I have first checked the enter your own sizes. If i click next the jquery validation is working fine, but I am clicking the enter your standard sizes radio button only. Click the bed type and dimension go to next div it asking the first enter your sizes. If i click the radio only check one function and get in to the next div.
<html>
<style>
.dimension
{
display: none;
}
.radio-buttons
{
display:none;
}
input[type=radio] + label
{
display:inline-block;
padding: 4px 12px;
border: 1px solid #ccc;
background-color: #f5f5f5;
font-size: 14px;
line-height: 20px;
color: #333;
}
input[type=radio]:checked + label
{
background-image: none;
background-color:red;
}
</style>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body> <form id="samplecode" name="samplecode" method="POST" action="">
<div id='div1'>
<div class="col-md-12" >
<div class='row'>
<div class="col-md-7 step-function">
<div class="form-group ">
<label class="one-step" >Step Three:Choose Dimension</label>
</div>
<div class="col-md-12">
<label class="radio-inline btn-radio"><input type="radio" name="size" value="v" >Choose From Standard Size</label>
<label class="radio-inline btn-radio"> <input type="radio" name="size" checked="checked" value="s"/>Enter Your Own Size</label>
</div>
<!-- enter your own size -->
<div class='row desc' id="sizes" >
<div class="col-md-12">
<label class="own-size">Your Own sizes(in Inches)</label>
</div>
<form id="lengthform" name="samplecode" method="POST">
<div class="col-md-12 ">
<div class="form-group col-md-6 col-lg-3"><input type="text" name="length" id="length" class="form-control len-class" Placeholder='Length'></div>
<div class="form-group col-md-6 col-lg-3 "> <input type="text" name="breadth" id="breadth" class="form-control len-class" Placeholder='Breadth'></div>
</div>
</form>
<div class="col-md-12 ">
<label class="not-sure-matters" >Not sure how to measure your mattress?</label>
</div>
<div class="col-md-12 ">
<a href='#' class='link-find-out'>Click here to find out</a>
</div>
</div>
<!-- END your own size -->
<!-- enter your Standard size -->
<div class='row desc' id="sizev" style='Display:none;' >
<div class="col-md-12">
<label class="own-size">Bed Type</label>
<div class='custom-btn-grp'>
<div class="bed_type">
<ul class="nav nav-pills">
<li>
<input type="radio" id="b1" name="radios" class="radio-buttons bed-di-btn" value="Single" checked >
<label for="b1">Single</label>
</li>
<li>
<input type="radio" id="b2" name="radios" class="radio-buttons bed-di-btn" value="Double" >
<label for="b2">Double(Twin)</label>
</li>
<li>
<input type="radio" id="b3" name="radios" class="radio-buttons bed-di-btn" value="Queen" >
<label for="b3">Queen</label>
</li>
<li>
<input type="radio" id="b4" name="radios" class="radio-buttons bed-di-btn" value="King" >
<label for="b4">King</label>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-12">
<label class="own-size">Dimension</label>
<div class='custom-btn-grp dimension-group'>
<div class ="dimension" id="d1">
<ul class="nav nav-pills">
<li>
<input type="radio" id="single1" class="radio-buttons bed-di-btn" name="single" value="1000s" >
<label for="single1">72x30</label>
</li>
<li>
<input type="radio" id="single2" class="radio-buttons bed-di-btn" name="single" checked value="2000s" >
<label for="single2">72x36 </label>
</li>
<li>
<input type="radio" id="single3" class="radio-buttons bed-di-btn" name="single" value="3000s" >
<label for="single3">75x36</label>
</li>
<li>
<input type="radio" id="single4" class="radio-buttons bed-di-btn" name="single" value="4000s" >
<label for="single4">78x36</label>
</li>
<li>
<input type="radio" id="single5" class="radio-buttons bed-di-btn" name="single" value="5000s" >
<label for="single5">84x36</label>
</li>
</ul>
</div>
<div class ="dimension" id="d2">
<ul class="nav nav-pills">
<li>
<input type="radio" id="doubles1" class="radio-buttons" name="doubles" checked value="1000d" >
<label for="doubles1">72x48</label>
</li>
<li>
<input type="radio" id="doubles2" class="radio-buttons" name="doubles" value="2000d" >
<label for="doubles2">75x48</label>
</li>
<li>
<input type="radio" id="doubles3" class="radio-buttons" name="doubles" value="3000d" >
<label for="doubles3">78x48</label>
</li>
<li>
<input type="radio" id="doubles4" class="radio-buttons" name="doubles" value="4000d" >
<label for="doubles4">84x48</label>
</li>
</ul>
</div>
<div class ="dimension" id="d3">
<ul class="nav nav-pills">
<li>
<input type="radio" id="queen1" class="radio-buttons" name="queen" checked value="1000q" >
<label for="queen1">72x60</label>
</li>
<li>
<input type="radio" id="queen2" class="radio-buttons" name="queen" value="2000q" >
<label for="queen2">75x60</label>
</li>
<li>
<input type="radio" id="queen3" class="radio-buttons" name="queen" value="3000q">
<label for="queen3">78x60</label>
</li>
<li>
<input type="radio" id="queen4" class="radio-buttons" name="queen" value="4000q">
<label for="queen4">84x60</label>
</li>
</ul>
</div>
<div class ="dimension" id="d4">
<ul class="nav nav-pills">
<li>
<input type="radio" id="king1" class="radio-buttons" name="king" checked value="1000k" >
<label for="king1">72x72</label>
</li>
<li>
<input type="radio" id="king2" class="radio-buttons" name="king" value="2000k" >
<label for="king2">75x72</label>
</li>
<li>
<input type="radio" id="king3" class="radio-buttons" name="king" value="3000k" >
<label for="king3">78x72</label>
</li>
<li>
<input type="radio" id="king4" class="radio-buttons" name="king" value="4000k" >
<label for="king4">84x72</label>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-12 "><label class="not-sure-matters" >Not sure how to measure your mattress?</label></div>
<div class="col-md-12 "><a href='#' class='link-find-out'>Click here to find out</a></div>
</div>
<!-- End standard sizes -->
</div>
<div class='row'>
<div class="col-md-5">
<img class="cust-image-size" src='img/cust.jpg'>
</div>
</div>
</div>
</div>
<div class='col-md-7'>
<div class='pull-right'>
<a href='#' id='summer5' class='next-color'>Next &#10095❯</a>
</div>
<div class=' pull-left' >
<a href='#Pre' id='summer4' class='next-color'><span>&#10094❮</span>Previous </a>
</div>
</div>
</div>
</form>
<div id="div2" style="display:none;">HI You successfully reached the solution</div>
</body>
// Jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#samplecode').validate({
rules: {
length: {
required: true,
number: true,
range: [72, 84]
},
breadth: {
required: true,
number: true,
range: [72, 84]
}
},
messages: {
length: {
required: 'Please select a template'
},
breadth: {
required: 'Please select a template'
}
},
submitHandler: function(){
$('div[id ^=div]').hide();
$("#div2").show();
return false;
}
});
$("#summer5").click(function() {
$("#samplecode").submit();
});
$("#length").change(function(){
var length =$(this).val();
$("#breadth").change(function(){
var breadth =$(this).val();
var result =length.concat(breadth);
alert(result);
});
});
$("input[name$='size']").click(function() {
var test = $(this).val();
//alert(test);
$("div.desc").hide();
$("#size" + test).show();
});
$(window).load(function()
{
$('.dimension').hide();
$('#d1').show();
document.getElementById("demo").innerHTML ="₨ " + 1000;
});
$('.bed_type ul li ').click(function()
{
var i = $(this).index();
$('.dimension').hide();
$('#d' + (i+1)).show();
var type ='b' + (i+1);
document.getElementById(type).addEventListener("click", bedtype);
});
});
</script>
</html>

Check the parent checkbox with jQuery

Basically I am trying to write a js func that if I check a child checkbox the parent checkbox also checks, if not already checked. I am using jquery here is my html:
<ul id="ulParent" style="margin: 0; padding: 0; list-style: none;">
<li style="margin: 0 0 5px 0;">
<input type="checkbox" checked="checked" class="liParent" id="p1" />Parent1
<ul id="ulParent" style="margin: 0; padding: 0; list-style: none;">
<li>
<input type="checkbox" checked="checked" class="liChild" id="c1" onclick="checkParent(this);" />Child1
</li>
<li>
<input type="checkbox" checked="checked" class="liChild" id="c2" onclick="checkParent(this);"/>Child2
</li>
<li>
<input type="checkbox" checked="checked" class="liChild" id="c3" onclick="checkParent(this);"/>Child3
</li>
<li>
<input type="checkbox" checked="checked" class="liChild" id="c4" onclick="checkParent(this);"/>Child4
</li>
</ul>
</li>
<li style="margin: 0 0 5px 0;">
<input type="checkbox" checked="checked" class="liParent" id="p2" />Parent2
<ul id="ulParent" style="margin: 0; padding: 0; list-style: none;">
<li>
<input type="checkbox" checked="checked" class="liChild" id="c1" onclick="checkParent(this);" />Child1
</li>
<li>
<input type="checkbox" checked="checked" class="liChild" id="c2" onclick="checkParent(this);"/>Child2
</li>
<li>
<input type="checkbox" checked="checked" class="liChild" id="c3" onclick="checkParent(this);"/>Child3
</li>
<li>
<input type="checkbox" checked="checked" class="liChild" id="c4" onclick="checkParent(this);"/>Child4
</li>
</ul>
</li>
</ul>
JS Func
function checkParent(child){
if (child != null) {
// if child is checked we need to check the parent category
if (child.checked) {
// get the parent checkbox and check it if not check....need help here....
$(child).parent().parent().parent()......
}
}
}

I'd remove the inline javascript in your HTML and use jQuery binding to bind the check event:
$(document).ready(function() {
$('input.liChild').change(function() {
if ($(this).is(':checked')) {
$(this).closest('ul').siblings('input:checkbox').attr('checked', true);
}
});
});
This will bind the event you're looking for to any input with the class liChild automatically without all those onclicks.

This will work, based on your structure:
$(child).parent().parent().prev().attr('checked', true);
or
$(child).closest('ul').prev().attr('checked', true);;