I am working on creating multiple likert scale using radio buttons. It is similar to this codepen. When you select the response for the first question and then proceed to the next one, the first one get unchecked on checking the next one. I want to keep the previous one checked when proceeding to the next question.`
<div class="wrap">
<h1 class="likert-header">This is a Likert Scale survey</h1>
<form action="">
<label class="statement">This HTML Likert scale is easy to use.</label>
<ul class='likert'>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Strongly agree</label>
</li>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Agree</label>
</li>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Neutral</label>
</li>
<li>
<input type="radio" name="likert" value="disagree">
<label>Disagree</label>
</li>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Strongly disagree</label>
</li>
</ul>
<label class="statement">It's clear that this is a responsive design.</label>
<ul class='likert'>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Strongly agree</label>
</li>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Agree</label>
</li>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Neutral</label>
</li>
<li>
<input type="radio" name="likert" value="disagree">
<label>Disagree</label>
</li>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Strongly disagree</label>
</li>
</ul>
<label class="statement">Codepen.io is an excellent tool for prototyping.</label>
<ul class='likert'>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Strongly agree</label>
</li>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Agree</label>
</li>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Neutral</label>
</li>
<li>
<input type="radio" name="likert" value="disagree">
<label>Disagree</label>
</li>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Strongly disagree</label>
</li>
</ul>
<label class="statement">Pete Fecteau is incredibly smart and handsome.</label>
<ul class='likert'>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Strongly agree</label>
</li>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Agree</label>
</li>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Neutral</label>
</li>
<li>
<input type="radio" name="likert" value="disagree">
<label>Disagree</label>
</li>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Strongly disagree</label>
</li>
</ul>
<div class="buttons">
<button class="clear">Clear</button>
<button class="submit">Submit</button>
</div>
</form>
</div>
Related
I'm cobbling together pieces of a D&D character sheet in HTML and Javascript to practice what I'm learning and I'm having a little trouble with a checkbox on it. I've built a list of "Skills" that, when checked, are supposed to add in an additional bonus. I have it in an If/Else statement that at least is working enough to show the "Else" value, but once the checkbox is clicked nothing changes. So it seems the issue is in how I've set up the checkbox in the "If" statement. I'm still a beginner so I'm sure it's something obvious I've missed. Any help is appreciated!
const abilityBonus = {
strBonus: 3,
dexBonus: 4,
conBonus: 1,
intBonus: 3,
wisBonus: 2,
chaBonus: 2,
profBonus: 3,
};
// Test If/Else for checkbox to add Proficiency bonus, id as an arugement
function skillBonusTwo(ability, elementID) {
const checkBox = document.getElementsByClassName('skill-box');
const skillAbility = abilityBonus[ability];
const totalBonus = skillAbility + abilityBonus.profBonus;
if (checkBox.checked == true) {
document.getElementById(elementID).value = totalBonus;
} else {
document.getElementById(elementID).value = skillAbility;
}
}
skillBonusTwo('chaBonus', 'deception');
skillBonusTwo('chaBonus', 'intimidation');
skillBonusTwo('dexBonus', 'acrobatics');
skillBonusTwo('strBonus', 'athletics');
<div id="skills">
<ul id="skill-list">
<lh>Skills</lh>
<li>
<label><input class="skill-box" id="acro-box" type="checkbox" />Acrobatics </label><input id="acrobatics" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Animal Handling</label><input id="animal-handling" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Arcana</label><input id="arcana" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Athletics</label><input id="athletics" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" id="deception-box" type="checkbox" />Deception</label><input id="deception" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />History</label><input id="history" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Insight</label><input id="insight" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Intimidation</label><input id="intimidation" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Investigation</label><input id="investigation" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Medicine</label><input id="medicine" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Nature</label><input id="nature" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Perception</label><input id="perception" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Performance</label><input id="performance" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Persuasion</label><input id="persuasion" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Religion</label><input id="religion" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Sleight of Hand</label><input id="sleight-of-hand" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Stealth</label><input id="stealth" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Survival</label><input id="survival" class="bonus-box" type="text" readonly="true"/>
</li>
</ul>
</div>
This is javascript:
$('.chkbx').click(function(){
var text = "";
$('.chkbx:checked').each(function(){
text += $(this).val()+',';
});
text = text.substring(0,text.length-1);
$('#textbx').val(text);
});
When I select numbers in the checkbox, It does not work in the input textbox.
JSFiddle
You can use .change event instead of .click like below,
$('.chkbx').change(function() {
// this will contain a reference to the checkbox
var text = "";
$('.chkbx:checked').each(function() {
text += $(this).val() + ',';
});
text = text.substring(0, text.length - 1);
console.log(text)
$('#textbx').val(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cat_list">
<li>
<input id="1" value="1" type="checkbox" class="chkbx" name="cat[]">
<label for="1" class="selectit">1</label>
<ul class="children">
<li>
<input id="11" value="11" type="checkbox" class="chkbx" name="cat[]">
<label for="11" class="selectit">11</label>
<ul class="children">
<li>
<input id="111" value="111" type="checkbox" class="chkbx" name="cat[]">
<label for="111" class="selectit">111</label>
</li>
<li>
<input id="112" value="112" type="checkbox" class="chkbx" name="cat[]">
<label for="112" class="selectit">112</label>
</li>
</ul>
</li>
<li>
<input id="12" value="12" type="checkbox" class="chkbx" name="cat[]">
<label for="12" class="selectit">12</label>
</li>
<li>
<input id="13" value="13" type="checkbox" class="chkbx" name="cat[]">
<label for="13" class="selectit">13</label>
</li>
<li>
<input id="14" value="14" type="checkbox" class="chkbx" name="cat[]">
<label for="14" class="selectit">14</label>
</li>
<li>
<input id="15" value="15" type="checkbox" class="chkbx" name="cat[]">
<label for="15" class="selectit">15</label>
<ul class="children">
<li>
<input id="151" value="151" type="checkbox" class="chkbx" name="cat[]">
<label for="151" class="selectit">151</label>
</li>
<li>
<input id="152" value="152" type="checkbox" class="chkbx" name="cat[]">
<label for="152" class="selectit">152</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<br/><br/>
<input type='text' id='textbx' value='' />
We are using bootstrap table js library.
<script src="https://unpkg.com/bootstrap-table#1.15.3/dist/bootstrap-table.min.js"></script>
When we use:
data-show-columns="true"
we get the below dropdown list.
<ul class="dropdown-menu show" role="menu">
<li role="menuitem">
<label><input type="checkbox" data-field="thumbnailUrl" value="0" checked="checked">
<span>Thumbnail</span>
</label>
</li>
<li role="menuitem">
<label><input type="checkbox" data-field="type" value="4" checked="checked"> <span>Recipe Type</span></label>
</li>
<li role="menuitem">
<label><input type="checkbox" data-field="rights" value="5" checked="checked"> <span>Rights</span></label>
</li>
<li role="menuitem">
<label><input type="checkbox" data-field="contributor" value="6" checked="checked">
<span>Contributor</span></label>
</li>
<li role="menuitem">
<label><input type="checkbox" data-field="rating" value="7" checked="checked"> <span>Rating</span></label>
</li>
<li role="menuitem">
<label><input type="checkbox" data-field="starRatings" value="8" checked="checked"> <span>Star</span></label>
</li>
</ul>
We need to sort this dropdown in alphabetic order along with checkbox state.
I have four radio buttons. I am getting the radio button value from the database and according to the value radio button will check. Now the first radio button is checked. I need data-tab value of the radio button which is selected. So that I can show the div. So I tried below code but it displays undefined. I have to add the class current to the Id value.
Onload I am getting the radio button value. Now how do I get the data-tab value without change?
For example, the first radio button is a. so data-tab value is tab-1. So I need tab-1 to show in the div.
Would you help me out on this issue?
$(document).ready(function() {
var ab=$("input[name='payment_details']:checked").val()
if (ab) {
alert(ab);
var tab_id = $(this).parent().attr('data-tab');;
alert(tab_id);
$("#" + tab_id).addClass('current');
}
});
<ul class="tabs payment_details_tab">
<li class="tab-link" data-tab="tab-1">
<input type="radio" name="payment_details" id="a" value="a" checked="">
<label class="radio_text" for="a"> a</label>
</li>
<li class="tab-link" data-tab="tab-2">
<input type="radio" name="payment_details" id="b" value="b">
<label class="radio_text" for="b">b</label>
</li>
<li class="tab-link" data-tab="tab-3">
<input type="radio" name="payment_details" id="c" value="c">
<label class="radio_text" for="c">c</label>
</li>
<li class="tab-link" data-tab="tab-4">
<input type="radio" name="payment_details" id="d" value="d">
<label class="radio_text" for="d"> d</label>
</li>
</ul>
<div id="tab-1" class="tab-content"></div>
<div id="tab-2" class="tab-content"></div>
<div id="tab-3" class="tab-content"></div>
<div id="tab-4" class="tab-content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The this, you are using is not referencing the element you are thinking. It is referencing the HTMLDocument.
Instead of using this in the selector use the element:
$($("input[name='payment_details']:checked")).parent().attr('data-tab');
$(document).ready(function() {
var ab=$("input[name='payment_details']:checked").val()
if (ab) {
alert(ab);
var tab_id = $($("input[name='payment_details']:checked")).parent().attr('data-tab');
alert(tab_id);
$("#" + tab_id).addClass('current');
console.log(this.constructor.name); //HTMLDocument
}
});
<ul class="tabs payment_details_tab">
<li class="tab-link" data-tab="tab-1">
<input type="radio" name="payment_details" id="a" value="a" checked="">
<label class="radio_text" for="a"> a</label>
</li>
<li class="tab-link" data-tab="tab-2">
<input type="radio" name="payment_details" id="b" value="b">
<label class="radio_text" for="b">b</label>
</li>
<li class="tab-link" data-tab="tab-3">
<input type="radio" name="payment_details" id="c" value="c">
<label class="radio_text" for="c">c</label>
</li>
<li class="tab-link" data-tab="tab-4">
<input type="radio" name="payment_details" id="d" value="d">
<label class="radio_text" for="d"> d</label>
</li>
</ul>
<div id="tab-1" class="tab-content"></div>
<div id="tab-2" class="tab-content"></div>
<div id="tab-3" class="tab-content"></div>
<div id="tab-4" class="tab-content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Though you can use this inside .each() like the following way:
$(document).ready(function() {
$("input[name='payment_details']:checked").each(function(){
var ab=$(this).val();
if (ab) {
console.log(ab);
var tab_id = $(this).parent().attr('data-tab');
console.log(tab_id);
$("#" + tab_id).addClass('current');
console.log(this); //currently checked radio element
}
});
});
<ul class="tabs payment_details_tab">
<li class="tab-link" data-tab="tab-1">
<input type="radio" name="payment_details" id="a" value="a" checked="">
<label class="radio_text" for="a"> a</label>
</li>
<li class="tab-link" data-tab="tab-2">
<input type="radio" name="payment_details" id="b" value="b">
<label class="radio_text" for="b">b</label>
</li>
<li class="tab-link" data-tab="tab-3">
<input type="radio" name="payment_details" id="c" value="c">
<label class="radio_text" for="c">c</label>
</li>
<li class="tab-link" data-tab="tab-4">
<input type="radio" name="payment_details" id="d" value="d">
<label class="radio_text" for="d"> d</label>
</li>
</ul>
<div id="tab-1" class="tab-content"></div>
<div id="tab-2" class="tab-content"></div>
<div id="tab-3" class="tab-content"></div>
<div id="tab-4" class="tab-content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
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>