We Keep Coding

keeping previous radio button response checked when clicking the next

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>

select checkbox on input textbox by jquery

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='' />

Click event on same button class, but invokes different action in jquery

I am having an issue. I have the code defined here:
$('.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);
})
$('.js-add-category').click(function() {
var categoryContent = `<div class="cars">
<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>
</ul>
</div>
<button type="button" class="js-add-section">Add Section</button>
</div> <br>`
$('.main').append(categoryContent);
});
$(document.body).on('click', 'button.js-add-section', function() {
var sectionContent = `<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>
</ul> </div>`
$('.cars').append(sectionContent);
});
.cars-item {
border-bottom: 1px solid gray;
}
ul {
/* Added to fully show console in snippet */
margin: 2px;
}
li {
display: inline;
}
.cars {
box-sizing: content-box;
width: 250px;
height: auto;
padding: 10px;
border: 5px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="js-add-category">Add Category</button> <br> <br>
<div class="main">
<div class="cars">
<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>
</ul>
</div>
<button type="button" class="js-add-section">Add Section</button>
<br>
<div class="section">
</div>
</div>
<br>
The issue is I am facing that, when I click on the Add Section button in a box, it adds duplicate rows in the other boxes. What I want to achieve is to add a row of checkboxes only in the box that I have clicked the 'Add Section' button.
When I click Add Category, it generates another box with another button Add Section
Please demo the code to get an overview. Please someone help me with this, I am totally stuck.
Thanks.

Just use $(this).parent().append(sectionContent); instead of $('.cars').append(sectionContent);
Working code
$('.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);
})
$('.js-add-category').click(function() {
var categoryContent = `<div class="cars">
<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>
</ul>
</div>
<button type="button" class="js-add-section">Add Section</button>
</div> <br>`
$('.main').append(categoryContent);
});
$(document.body).on('click', 'button.js-add-section', function() {
var sectionContent = `<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>
</ul> </div>`
$(this).parent().append(sectionContent);
});
.cars-item {
border-bottom: 1px solid gray;
}
ul {
/* Added to fully show console in snippet */
margin: 2px;
}
li {
display: inline;
}
.cars {
box-sizing: content-box;
width: 250px;
height: auto;
padding: 10px;
border: 5px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="js-add-category">Add Category</button> <br> <br>
<div class="main">
<div class="cars">
<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>
</ul>
</div>
<button type="button" class="js-add-section">Add Section</button>
<br>
<div class="section">
</div>
</div>
<br>

$(".cars") refers to all .cars elements. You only want the one that contains the button you clicked on. That would be $(this).closest(".cars")
To make the validation code work on newly added sections, you need to use event delegation, just like you do for the .js-add-section click handler.
$(".main").on('change', '.js-cars-item [type="checkbox"]', 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
$(this).closest('.cars').find('.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 = [];
$(this).closest(".cars").find(".cars-item input:checkbox:checked").each(function(index) {
checkeds[index] = $(this).attr('id');
});
console.clear();
console.log("These are checked:", checkeds);
})
$('.js-add-category').click(function() {
var categoryContent = `<div class="cars">
<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>
</ul>
</div>
<button type="button" class="js-add-section">Add Section</button>
</div> <br>`
$('.main').append(categoryContent);
});
$(document.body).on('click', 'button.js-add-section', function() {
var sectionContent = `<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>
</ul> </div>`
$(this).closest('.cars').append(sectionContent);
});
.cars-item {
border-bottom: 1px solid gray;
}
ul {
/* Added to fully show console in snippet */
margin: 2px;
}
li {
display: inline;
}
.cars {
box-sizing: content-box;
width: 250px;
height: auto;
padding: 10px;
border: 5px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="js-add-category">Add Category</button> <br> <br>
<div class="main">
<div class="cars">
<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>
</ul>
</div>
<button type="button" class="js-add-section">Add Section</button>
<br>
<div class="section">
</div>
</div>
<br>

Issue in multi select filter

I need to filter using multiselct ,data attribute . it is working but not as expected
here is my code
<ul>
<li>
<div class="sts">
<h1>filter 1</h1>
<div class="checkbox">
<label>
<input data-id="1" data-type="st" class="stat st" type="checkbox" />1
</label>
</div>
<div class="checkbox">
<label>
<input data-id="2" data-type="st" class="stat st" type="checkbox" />2
</label>
</div>
<div class="checkbox">
<label>
<input data-id="3" data-type="st" class="stat st" type="checkbox" />3
</label>
</div>
</div>
</li>
<li>
<h1>filter 2</h1>
<div class="ats">
<div class="checkbox">
<label>
<input data-id="foo" data-type="at" class="stat at" type="checkbox" />foo
</label>
</div>
<div class="checkbox">
<label>
<input data-id="boo" data-type="at" class="stat at" type="checkbox" />boo
</label>
</div>
<div class="checkbox">
<label>
<input data-id="bar" data-type="at" class="stat at" type="checkbox" />bar
</label>
</div>
</div>
</li>
<li>
<h1>filter 3</h1>
<div class="dpts">
<div class="checkbox">
<label>
<input data-id="a" data-type="dpt" class="stat dpt" type="checkbox" />a
</label>
</div>
<div class="checkbox">
<label>
<input data-id="b" data-type="dpt" class="stat dpt" type="checkbox" />b
</label>
</div>
<div class="checkbox">
<label>
<input data-id="c" data-type="dpt" class="stat dpt" type="checkbox" />c
</label>
</div>
<div class="checkbox">
<label>
<input data-id="d" data-type="dpt" class="stat dpt" type="checkbox" />d
</label>
</div>
</div>
</li>
</ul>
<ul class="list">
<li data-at="foo" data-st="1" data-dpt="a">asdw</li>
<li data-at="boo" data-st="2" data-dpt="c">qwedf</li>
<li data-at="boo" data-st="1" data-dpt="a">qwedf</li>
<li data-at="bar" data-st="3" data-dpt="b">tazxsw</li>
<li data-at="bar" data-st="1" data-dpt="b">zxcvb</li>
<li data-at="foo" data-st="1" data-dpt="b">poiuy</li>
<li data-at="boo" data-st="2" data-dpt="d">lkjhg</li>
<li data-at="boo" data-st="3" data-dpt="d">lkjhg</li>
</ul>
Here is my script
<script>
$('.stat').on('click', function() {
var $stats = $('.stat:checked');
var $items = $('.list li');
if ($stats.length == 0) {
$items.show();
return;
}
$items.hide();
$stats.each(function() {
var $stat = $(this);
$items.filter(function() {
return $(this).data($stat.data('type')) == $stat.data('id');
}).show();
})
});
</script>
If i select any one from each fliter it is working fine , but when i select from same filter it should perform logical OR but it is performing logical AND.
Here is the fiddler lik

I'm struggling with this same problem as durai. I updated the fiddle, please make selections as instructed at the top of the page and you'll see the problematic case.
<ul class="list">
<li data-at="foo" data-st="1" data-dpt="a">asdw</li>
<li data-at="boo" data-st="3" data-dpt="c">qwedf</li>
<li data-at="boo" data-st="1" data-dpt="a">qwedf</li>
<li data-at="bar" data-st="3" data-dpt="a">this should be visible (when filters: 3 | bar | a&b)</li>
<li data-at="bar" data-st="2" data-dpt="b">zxcvb</li>
<li data-at="foo" data-st="1" data-dpt="b">poiuy</li>
<li data-at="boo" data-st="2" data-dpt="d">lkjhg</li>
<li data-at="bar" data-st="3" data-dpt="b">this should be visible (when filters: 3 | bar | a&b)</li>

Return results in a list by a search input

Friends, I am trying to learn how I can make a 'trivial' search input.. only the HTML without consulting the database.
I have a list of eight options, and would like to make a JS function to help me hide the options that don't match the search.
http://codepen.io/pen/
<div class="search__dropdown">
<div class="search__dropdown-header">
<h3 class="search__dropdown-title">Hostel</h3>
</div>
<div class="search__dropdown-body">
<input class="search__dropdown-input search__dropdown-input--search" type="text" placeholder="Procure" />
<ul class="search__dropdown-list search__dropdown-list--hostel">
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel1" type="checkbox" id="hostel1" />
<label class="search__dropdown-label" for="hostel1">one</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel2" type="checkbox" id="hostel2" />
<label class="search__dropdown-label" for="hostel2">two</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel3" type="checkbox" id="hostel3" />
<label class="search__dropdown-label" for="hostel3">three</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel4" type="checkbox" id="hostel4" />
<label class="search__dropdown-label" for="hostel4">four</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel6" type="checkbox" id="hostel6" />
<label class="search__dropdown-label" for="hostel6">five</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel7" type="checkbox" id="hostel7" />
<label class="search__dropdown-label" for="hostel7">six</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel8" type="checkbox" id="hostel8" />
<label class="search__dropdown-label" for="hostel8">seven</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel9" type="checkbox" id="hostel9" />
<label class="search__dropdown-label" for="hostel9">eight</label>
</li>
</ul>
</div>
</div>

Attach the input event to trigger every letter change
Iterate through the list items and check if their text contains the current value
If not, hide the item
$('.search').on('input', function() {
var search = $(this).val();
var options = $('li:has([name*="hostel"])');
options.each(function() {
$(this).show();
if ($(this).find('[for*="hostel"]').text().indexOf(search) < 0) {
$(this).hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="search__dropdown">
<div class="search__dropdown-header">
<h3 class="search__dropdown-title">Hostel</h3>
</div>
<div class="search__dropdown-body">
<input class="search search__dropdown-input search__dropdown-input--search" type="text" placeholder="Procure" />
<ul class="search__dropdown-list search__dropdown-list--hostel">
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel1" type="checkbox" id="hostel1" />
<label class="search__dropdown-label" for="hostel1">one</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel2" type="checkbox" id="hostel2" />
<label class="search__dropdown-label" for="hostel2">two</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel3" type="checkbox" id="hostel3" />
<label class="search__dropdown-label" for="hostel3">three</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel4" type="checkbox" id="hostel4" />
<label class="search__dropdown-label" for="hostel4">four</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel6" type="checkbox" id="hostel6" />
<label class="search__dropdown-label" for="hostel6">five</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel7" type="checkbox" id="hostel7" />
<label class="search__dropdown-label" for="hostel7">six</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel8" type="checkbox" id="hostel8" />
<label class="search__dropdown-label" for="hostel8">seven</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel9" type="checkbox" id="hostel9" />
<label class="search__dropdown-label" for="hostel9">eight</label>
</li>
</ul>
</div>
</div>