Develop Reference

jquery .last() firing multiple times when clicking last element only once

I have some tabs with radio buttons in them and want to check when the last option is clicked (by that I mean any radio button in the last tab, not the last radio button).
This is my html:
<div id="smartwizard" class="sw-main sw-theme-default">
<ul class="nav nav-tabs step-anchor">
<li class="optietabs nav-item done">
<a href="#step-0" class="nav-link">Lijmlaag
<button class="infotooltip" data-tooltip="lijmlaag is gewoon een dikke laag lijm">
<i class="fas fa-info-circle"></i></button></a>
<div id="step-0" class="" style="display: none;">
<form class="" id="step__form" method="post">
<div class="tab-content2">
<input type="radio" id="Wit-Lijmlaag" name="Lijmlaag" value="Wit(prijsberekening)($m2*4);">
<label for="Wit-Lijmlaag">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Wit">
<p><strong>Wit</strong></p>
</div>
</label>
<input type="radio" id="Grijs-Lijmlaag" name="Lijmlaag" value="Grijs(prijsberekening)($stuksprijs+15);">
<label for="Grijs-Lijmlaag">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Grijs">
<p><strong>Grijs</strong></p>
</div>
</label>
</div>
</form>
</div>
</li>
<li class="optietabs nav-item done">
<a href="#step-1" class="nav-link">Laminaat
<button class="infotooltip" data-tooltip="Test test test test ">
<i class="fas fa-info-circle"></i></button></a>
<div id="step-1" class="" style="display: none;">
<form class="" id="step__form" method="post">
<div class="tab-content2">
<input type="radio" id="Anti-slip laminaat-Laminaat" name="Laminaat" value="Anti-slip laminaat(prijsberekening)($o*5);">
<label for="Anti-slip laminaat-Laminaat">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Anti-slip laminaat">
<p><strong>Anti-slip laminaat</strong></p>
</div>
</label>
<input type="radio" id="Glans laminaat-Laminaat" name="Laminaat" value="Glans laminaat(prijsberekening)($m2*4);">
<label for="Glans laminaat-Laminaat">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Glans laminaat">
<p><strong>Glans laminaat</strong></p>
</div>
</label>
<input type="radio" id="Mat laminaat-Laminaat" name="Laminaat" value="Mat laminaat(prijsberekening)($m2*4);">
<label for="Mat laminaat-Laminaat">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Mat laminaat">
<p><strong>Mat laminaat</strong></p>
</div>
</label>
<input type="radio" id="Geen-Laminaat" name="Laminaat" value="Geen">
<label for="Geen-Laminaat">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Geen">
<p><strong>Geen</strong></p>
</div>
</label>
</div>
</form>
</div>
</li>
<li class="optietabs nav-item active">
Afwerking
<div id="step-2" class="">
<form class="" id="step__form" method="post">
<div class="tab-content2">
<input type="radio" id="Contoursnijden-Afwerking" name="Afwerking" value="Contoursnijden(prijsberekening)($m2*30);">
<label for="Contoursnijden-Afwerking">
<div class="afwerking-tab">
<div class="ribbon ribbon-top-right">
<span>Meest gekozen</span>
</div>
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Contoursnijden">
<p><strong>Contoursnijden</strong></p>
</div>
</label>
<input type="radio" id="Schoonsnijden-Afwerking" name="Afwerking" value="Schoonsnijden">
<label for="Schoonsnijden-Afwerking">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Schoonsnijden">
<p><strong>Schoonsnijden</strong></p>
</div>
</label>
</div>
</form>
</div>
</li>
</ul>
</div>
This is my jquery function:
$("#smartwizard input:radio").on("click", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
var form_data = $("#formsid form").serialize();
$('#formaataantaltab').removeClass('formaataantal-done');
$('#formaataantaltab').addClass('formaataantal');
$.ajax({
type:'post',
url:"catalog/calcdiv.php",
data:({form_data: form_data}),
success:function(data){
var content = $( $.parseHTML(data) );
$( "#ajaxresult" ).empty().append( content );
$('#prijsonder').empty().append($('#prijs').html());
// indicate the ajax has been done, release the next step
$("#smartwizard").smartWizard("next");
}
});
$laatsteopties = $(".optietabs").last();
$($laatsteopties).on("change", function() {
console.log('last option clicked');
});
$(".optietabs").each(function(){
$(this).on("click", function() {
$([document.documentElement, document.body]).animate({
scrollTop: $(this).offset().top
}, 0);
})
});
});
Where this part is logging when a last option is clicked in the console:
$laatsteopties = $(".optietabs").last();
$($laatsteopties).on("change", function() {
console.log('last option clicked');
});
The problem is when I click one radio button, I see the console logging last option clicked multiple times, in this case 3, instead of just one time each radio button click.
Why is that? What am I doing wrong?

You added code $($laatsteopties).on("change", function() {... (1) in block $("#smartwizard input:radio").on("click", function(e, anchorObject, stepNumber, stepDirection, stepPosition) { (2), so code (1) executes three times for each radio button. You need to move code
$laatsteopties = $(".optietabs").last();
$($laatsteopties).on("change", function() {
console.log('last option clicked');
});
out of code block (2).

Select All | Deselect All check boxes using a toggle button

I need to select all and deselect all check boxes on a button toggle.
here is the html code for check-boxes
<div class="accordion-header js-accordion-header">
<input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-2" value="tc_Logout" aria-hidden="true" style="display: none;">
<label for="labelauty-2">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label> tc_Logout
</div>
when I select this check box aria-checked="true" is automatically added to <label for="labelauty-2"> which output this
<label for="labelauty-1" aria-checked="true">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>
It changes the status to true or false when its checked and unchecked.
Now I have several check-boxes like this which needs to be checked or unchecked using a toggle button.
here is my html code for toggle button
<div class="toggle-wrap w-checkbox float-right">
<input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkboxtoggle" onclick="toggle()">
<label class="toggle-label w-form-label" for="Toggle-Switch"></label>
<div class="toggle">
<div class="toggle-active">
<div class="active-overlay"></div>
<div class="top-line"></div>
<div class="bottom-line"></div>
</div>
</div>
</div>
Here is my JS code which returns an error "prop is not defined"
function toggle(source) {
checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
How can I achieve this using javascript or jquery

Working ( without event listeners)
Note: See next example, that used event listeners and is preferred.
You had some issues I had to fix in order to get this working.
See: https://jsfiddle.net/0p64mdsg/4
First off, your input types were not actually toggles.
Secondly, you were not passing this when you were calling the toggle function.
Current version of code in my jsFiddle:
function toggle(source) {
checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
alert('TEST2');
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
<div class="accordion-header js-accordion-header">
<input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-2" value="tc_Logout" aria-hidden="true" >
<label for="labelauty-2">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label> tc_Logout
</div>
<label for="labelauty-1" aria-checked="true">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>
Test1
<div class="toggle-wrap w-checkbox float-right">
<input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkbox" onclick="toggle(this)">
<label class="toggle-label w-form-label" for="Toggle-Switch"></label>
<div class="toggle">
<div class="toggle-active">
<div class="active-overlay"></div>
<div class="top-line"></div>
<div class="bottom-line"></div>
</div>
</div>
</div>
Using Event Listeners
Since onClick is not preferred, you should handle the toggle click handling like this: https://jsfiddle.net/0p64mdsg/15/
<script>
document.getElementById("Toggle-Switch").addEventListener("click", toggle);
function toggle(source) {
checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
alert('TEST2' + source);
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = document.getElementById("Toggle-Switch").checked;
}
}
</script>

Try This To select/Deselect All Chechbox
$(document).on('click','#chkAll',function(){
if($(this).prop('checked')==true){
$('.ChkSelect').attr("checked",true)
}
else
{
$('.ChkSelect').attr("checked",false)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect"><br/><br/>
Select/Deselect All :<input type="checkbox" id="chkAll"> <br/><br/>

Selecting Checkboxes Based on Value and Parent ID

I'm using Tampermonkey to check checkboxes. The way it's laid out is there's multiple 'Items', each with the same set of checkboxes. I'm trying to have the checkbox pre-selected based on a combination of the checkbox value and the ID (or even title, if that's more ideal).
Currently if I use the below, it will select the checkbox but it will do so for Item 1, Item 2, Item 3 and so on when I need to select different options for each. I'm trying to figure out how I go about narrowing the selection based on the ID (122) or even the title (Item 1)?
$("input:checkbox[value='See Notes']").attr("checked", true);
This is what my HTML looks like for each item:
<div class="field tabular">
<span class="item-data">{"Id":"122"}</span>
<div class="field-content">
<div class="title" title="Item 1">Item 1</div>
<div class="data">
<div class="errors"></div>
<div class="control">
<div class="option">
<input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
<label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
<label for="checkbox_3668-1523196351429_option1">Repair Required</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
<label for="checkbox_3668-1523196351429_option2">See Notes</label>
</div>
<!-- Etc... -->

You can do something like:
$('[title="Item 1"]') //Select elemements with attribute title="Item 1"
.next() //Select the next element, which is div with class .data
.find("input:checkbox[value='" + value + "']") //Find checkbox with the value
.prop("checked", true); //Set the prop checked to true
Here is a snippet:
var item = 'Item 1';
var value = 'See Notes';
$('[title="' + item + '"]').next().find("input:checkbox[value='" + value + "']").prop("checked", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field tabular">
<span class="item-data">{"Id":"122"}</span>
<div class="field-content">
<div class="title" title="Item 1">Item 1</div>
<div class="data">
<div class="errors"></div>
<div class="control">
<div class="option">
<input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
<label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
<label for="checkbox_3668-1523196351429_option1">Repair Required</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
<label for="checkbox_3668-1523196351429_option2">See Notes</label>
</div>
</div>
</div>
</div>
</div>
<br />
<br />
<div class="field tabular">
<span class="item-data">{"Id":"123"}</span>
<div class="field-content">
<div class="title" title="Item 2">Item 2</div>
<div class="data">
<div class="errors"></div>
<div class="control">
<div class="option">
<input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
<label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
<label for="checkbox_3668-1523196351429_option1">Repair Required</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
<label for="checkbox_3668-1523196351429_option2">See Notes</label>
</div>
</div>
</div>
</div>
</div>

Increment input name using javascript

I have a div with some radio buttons, and the input names are cty_1. If i add more div the input names inside that divs should become cty_2, cty_3, etc.respectively.
Here's my code:
<div class="category">
<div class="col-md-6">
<input type="radio" name="cty_1" id="1" value="car">
<label for="1">car</label>
</div>
<div class="col-md-6">
<input type="radio" name="cty_1" id="2" value="bike">
<label for="2">bike</label>
</div>
</div>
If another div is added, i want that like
<div class="category">
<div class="col-md-6">
<input type="radio" name="cty_1" id="1" value="car">
<label for="1">car</label>
</div>
<div class="col-md-6">
<input type="radio" name="cty_1" id="2" value="bike">
<label for="2">bike</label>
</div>
</div>
<div class="category">
<div class="col-md-6">
<input type="radio" name="cty_2" id="3" value="phone">
<label for="3">phone</label>
</div>
<div class="col-md-6">
<input type="radio" name="cty_2" id="4" value="computer">
<label for="4">computer</label>
</div>
</div>
NB: i don't know javascript.

If you're using jQuery then this is pretty easy. Using the following code, every time you click "Go" a new category element will be appended and the name and id attributes will increment:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<div class="container">
<btn class="btn btn-primary">Go</btn>
<div class="category">
<div class="col-md-6">
<input type="radio" name="cty_1" id="1" value="car">
<label for="1">car</label>
</div>
<div class="col-md-6">
<input type="radio" name="cty_1" id="2" value="bike">
<label for="2">bike</label>
</div>
</div>
</div>
</body>
<script>
$('.btn-primary').on('click',function(){
var idx = parseInt($('.category').last().index())+1;
$('.category')
.last()
.clone()
.find('input[type=radio]')
.each(function(index){
$(this)
.attr('name','cty_' + idx)
.attr('id','cty_' + idx + "_" + index)
.parent()
.find('label')
.attr('for','cty_' + idx + "_" + index)
.end()
})
.end()
.insertAfter($('.category').last());
});
</script>

Try this: updated fiddle
//Html
<div id="divMain">
</div>
//jQuery Code
var valuesArr=["car","bike","truck","Test4","Test5"];
var cityCounter=1;
var idCounter=1;
var addCategoryFlag=false;
function CallHtml(){
var html="";
for(var i=0;i<valuesArr.length;i++){
if(idCounter%2!=0){
html+='<div class="category">';
}
else{
addCategoryFlag=true;
}
html+='<div class="col-md-6">';
html+=' <input type="radio" name="cty_'+cityCounter+'" id="'+idCounter+'" value="'+valuesArr[i]+'">';
html+=' <label for="'+idCounter+'">'+valuesArr[i]+'</label>';
html+='</div>';
if(addCategoryFlag){
html+='</div>';
addCategoryFlag=false;
cityCounter++;
}
idCounter++;
}
$("#divMain").html(html);
}
CallHtml();

If Child Category checkbox Selected Then Parent checkbox Should be selected Automatically

I have nested Loop For Parent And Child Category,
Now I want If My Child Is selected Then All Parent Of that Child Category Should Be Selected Automatically.
In My code Only One Parent is checked , So how can i do it.
And also If i Uncheck Child Then, Parent Should Be uncheck Automatically
So is that possible.
Thanks in advance.
Here Is My code,
<label>Product Category:</label>
<div class="wk_field wk_category">
<div class="wk_for_validation">
<div id="wk_category_label">CATEGORIES</div>
<div class="wk_cat_container" style="margin-left:0px;">
<span class="wk_minus"> </span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Gold</span>
<input class="wk_elements" type="checkbox" value="3" name="category[]" id="3">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 20px;">
<span class="wk_no"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Earrings</span>
<input class="wk_elements" type="checkbox" value="27" name="category[]" onclick="checkParent('3', this)">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 20px;">
<span class="wk_minusend"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Rings</span>
<input class="wk_elements" type="checkbox" value="26" name="category[]" onclick="checkParent('3', this)" id="26">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 40px;" >
<span class="wk_no"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Ladies</span>
<input class="wk_elements" type="checkbox" value="37" name="category[]" onclick="checkParent('26', this)">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 40px;">
<span class="wk_no"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Gents</span>
<input class="wk_elements" type="checkbox" value="36" name="category[]" onclick="checkParent('26', this)">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 20px;">
<span class="wk_no"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Bangles</span>
<input class="wk_elements" type="checkbox" value="25" name="category[]" onclick="checkParent('3', this)">
</div>
<script type="text/javascript">
function checkParent(id, ele) {
var parent = document.getElementById(id);
if (ele.checked === true) parent.checked = true;
}
</script>

if I got it right when a child is checked you wanted its parent to be checked, and its parent's parent, and so on till root.
If so, check this fiddle I created.
I removed inline event handlers (onclick), associated a data-parent attribute to each child, and used the attribute to go up the tree in the following reviewed checkParent function:
function checkParent(ele) {
var idparent = ele.getAttribute('data-parent');
if(idparent){
var parent = document.getElementById(idparent);
if (ele.checked === true) parent.checked = true;
checkParent(parent);
}
}
Also, I didn't understand how exactly you wanted child uncheck event to work, you can try and play with jsfiddle to get that, or point it out more clearly to have further help.