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).
Related
I have an accordion with check boxes for each accordion item, some of the accordion items are hidden with style="display:none;" attribute.
here is a screenshot of the html dom hierarchy
here is the html code
<div id="testcases" class="accordion js-accordion">
<div class="accordion__item js-accordion-item" id="0001" name="com.edgecase.TS_EdgeHome">
<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-0001" value="tc_Login" aria-hidden="true" style="display: none;">
<label for="labelauty-0001">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>tc_Login</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
<div class="accordion__item js-accordion-item active"></div>
<div class="accordion__item js-accordion-item" id="00011" name="com.edgecase.TS_EdgeHome">
<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-00011" value="tc_Logout" aria-hidden="true" style="display: none;">
<label for="labelauty-00011">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>tc_Logout</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
<div class="accordion__item js-accordion-item" id="1001" style="display:none;" name="com.edgecase.TS_EdgePanel">
<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-1001" value="tc_AddContract" aria-hidden="true" style="display: none;">
<label for="labelauty-1001">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>tc_AddContract</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
<div class="accordion__item js-accordion-item" id="2001" style="display:none;" name="com.edgecase.TS_EdgeRoute">
<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-2001" value="tc_VerifyContract" aria-hidden="true" style="display: none;">
<label for="labelauty-2001">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>tc_VerifyContract</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
</div>
I have created a function to select/deselect all check boxes, but it also checks the hidden check boxes.
function toggle(source){
checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
for(var i=0, n=checkboxes.length; i<n; i++) {
checkboxes[i].checked = source.checked;
}
}
Using below code I could add the attribute to label tag
checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox')
for(var i=0, n=checkboxes.length; i<n; i++) {
var id = checkboxes[i].attributes.id
var id = id.textContent
$('label[for="'+id+'"]').attr("aria-checked","true");
}
I need to select/deselect all the check boxes for div elements without style="display:none;" attribute.(i.e. I need to select/deselect only visible check boxes) and add aria-checked="true" to label tag if checked else add aria-checked="false" using for value inside label tag.
can somebody help me figure this out?
You can verify if your checkbox is displayed with the fillowing:
for(var i=0, n=checkboxes.length; i<n; i++) {
if (checkboxes[i].style.display != "none"){
checkboxes[i].checked = true;
}
}
//find by name, filter for only those that are visible
$(document.getElementsByName('inputLableautyNoLabeledCheckbox')).filter(':visible').each( function () {
//change the state
this.checked = source.checked;
//find the label for the element and change it's aria state
$('label[for="'+ this.id +'"]').attr("aria-checked", source.checked);
} );
This will be even easy with jquery as I am seeing jquery tag in your question.
$("input:checkbox:visible").not("#chkDisplayAll").prop('checked', $(this).prop('checked'));
See the Snippet below:
$(document).ready(function () {
$("#chkCheckAll").click(function () {
$("input:checkbox:visible").not("#chkDisplayAll").prop('checked', $(this).prop('checked'));
});
$("#chkDisplayAll").click(function(){
if($("#chkDisplayAll").is(":checked"))
$("input:checkbox.not-visible").show();
else
$("input:checkbox.not-visible").hide();
})
$("input:checkbox.not-visible").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="chkCheckAll" /> Check All
<input type="checkbox" id="chkDisplayAll" /> Display All
<br/>
<input type="checkbox" class="checkBoxClass not-visible" id="Checkbox1" />
<input type="checkbox" class="checkBoxClass" id="Checkbox2" />
<input type="checkbox" class="checkBoxClass not-visible" id="Checkbox3" />
<input type="checkbox" class="checkBoxClass" id="Checkbox4" />
<input type="checkbox" class="checkBoxClass not-visible" id="Checkbox5" />
You can also test it here
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>
I have multiple inputs on the same page. Based on the selection and once the user press "Submit" I would like to show the relevant divs and hide the ones that are not related to the selection.
I could implement the structure I wanted but can not get the jQuery to display the different values.
Here is my code so far:
(function($) {
$('#quiz_submit').click(function() {
$('#quiz_submit').click(function() {
if ($('input[type="radio"]').attr("id") == "option-one") {
$('.a1').show();
$('.a2, .a3').hide();
} else if ($('input[type="radio"]').attr("id") == "option-two") {
$('.a2').show();
$('.a1, .a3').hide();
} else($('input[type="radio"]').attr("id") == "option-three") {
$('.a3').show();
$('.a1, .a2').hide();
}
});
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="quiz__form">
<li class="quiz__item">
<input type="radio" id="option-one" name="quiz-selector">
<label for="option-one">Question 1</label>
<div class="check"></div>
</li>
<li class="quiz__item">
<input type="radio" id="option-two" name="quiz-selector">
<label for="option-two">Question 2</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li class="quiz__item">
<input type="radio" id="option-three" name="quiz-selector">
<label for="option-three">Question 3</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
<input type="button" id="quiz_submit" class="submit-cta" value="SUBMIT">
<div class="a1">Answerof the questoon - One </div>
<div class="a2">Answerof the questoon - Two </div>
<div class="a3">Answerof the questoon - Three </div>
You need to add a button with id=quiz_submit in your HTML. You also have typos in the third and final condition.
(function($) {
$('#quiz_submit').click(function() {
let checkedId = $('input[type=radio][name=quiz-selector]:checked').attr('id')
if (checkedId == "option-one") {
$('.a1').show();
$('.a2, .a3').hide();
} else if (checkedId == "option-two") {
$('.a2').show();
$('.a1, .a3').hide();
} else if(checkedId == "option-three") {
$('.a3').show();
$('.a1, .a2').hide();
}
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="quiz__form">
<li class="quiz__item">
<input type="radio" id="option-one" name="quiz-selector">
<label for="option-one">Question 1</label>
<div class="check"></div>
</li>
<li class="quiz__item">
<input type="radio" id="option-two" name="quiz-selector">
<label for="option-two">Question 2</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li class="quiz__item">
<input type="radio" id="option-three" name="quiz-selector">
<label for="option-three">Question 3</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
<input type="button" id="quiz_submit" value="submit"/>
<div class="a1">Answerof the questoon - One </div>
<div class="a2">Answerof the questoon - Two </div>
<div class="a3">Answerof the questoon - Three </div>
If your problem is that your jQuery isn't working, it may have to do with the fact that there isn't any way for your code to get run.
First you have a click function inside a click function, take away one of those. Secondly there is no button to for that click handler to even run. I can't see anything particularly wrong with the code, as those were the things that stuck out to me.
Let me know if you are still getting an error after fixing that.
There's no element with the id quiz_submit in your html code.
i just created a code for you. that may be your answer.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="quiz__form">
<li class="quiz__item">
<input type="radio" id="option-one" name="quiz-selector">
<label for="option-one">Question 1</label>
<div class="check"></div>
</li>
<li class="quiz__item">
<input type="radio" id="option-two" name="quiz-selector">
<label for="option-two">Question 2</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li class="quiz__item">
<input type="radio" id="option-three" name="quiz-selector">
<label for="option-three">Question 3</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
<div class="a1" style="display:none">Answerof the questoon - One </div>
<div class="a2" style="display:none">Answerof the questoon - Two </div>
<div class="a3" style="display:none">Answerof the questoon - Three </div>
and jquery
$(document).ready(function(){
$('input[type="radio"]').change(function(){
if($(this).attr("id")=="option-one"){
$(".a1").show();
$(".a2").hide();
$(".a3").hide();
}
if($(this).attr("id")=="option-two"){
$(".a1").hide();
$(".a2").show();
$(".a3").hide();
}
if($(this).attr("id")=="option-three"){
$(".a1").hide();
$(".a2").hide();
$(".a3").show();
}
});
});
and here is working fiddle.
ClickHereForFiddle
I am building a specific time checkbox and upon click I need the days of the week to drop down with a checkbox. Once the user clicks that checkbox the [From - To] appears.
The thing is I have multiple of these going down and need to only display for the certain one I clicked.
So far I only have it set it for Monday but I cant get the from-to to appear on the first one.
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
</div>
</div>
</div>
</div>
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
<div class="monday_to_from" style="display:none">
<input type="text" value="From">
<input type="text" value="To">
</div>
</div>
</div>
</div>
$('.specificTime').on('click', function() {
$(this).parents('.specificHolder').find('.specific_on').toggle('slow');
});
$('.monday').on('click', function(){
$(this).parents('.specificHolder').find('.monday_to_from').toggle('slow');
});
https://jsfiddle.net/y1b8fr20/
Update
Using toggle() between more than one trigger creates a confusing behavior. This update separates the sliding of up and down and listens for the change event instead of the click event for more control between .monday checkboxes. Now it will behave as follows:
The to from boxes only appears when a .monday checkbox is checked
If a .monday checkbox is unchecked, the .to from boxes will slideUp.
If either .monday is checked, fromto stays.
fromto will only slideUp if both .mondays are unchecked
You have only one from to input so this is sufficient:
$('.monday').on('change', function() {
if ($('.monday').is(':checked')) {
$('.monday_to_from').slideDown('slow');
} else {
$('.monday_to_from').slideUp('slow');
}
});
Move this out of the influence of the second set of checkboxes:
<div class="monday_to_from" style="display:none">
<input type="text" value="From">
<input type="text" value="To">
</div>
Demo
$('.specificTime').on('click', function() {
$(this).parents('.specificHolder').find('.specific_on').toggle('slow');
});
$('.monday').on('change', function() {
if ($('.monday').is(':checked')) {
$('.monday_to_from').slideDown('slow');
} else {
$('.monday_to_from').slideUp('slow');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
</div>
</div>
</div>
</div>
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
</div>
</div>
</div>
</div>
<div class="monday_to_from" style="display:none">
<input type="text" value="From">
<input type="text" value="To">
</div>
I use a simple Bootstrap pophover, But i face problem when i insert Datepicker under this pophover, then Datepicker it's not show. but, normal Datepicker is work if i don't insert it under pophover.
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="clearfix ">
<div class="checkbox">
<label>
<input id="asap" type="checkbox"> ASAP
</label>
</div>
</div>
<div class="clearfix hideevent">
<div class="form-group">
<div class="checkbox">
<label>
<input name="morning" type="radio"> Morning
</label>
</div>
<div class="checkbox">
<label>
<input name="morning" type="radio"> Evening
</label>
</div>
</div>
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text"/>
</div>
</form>
</div>
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
$('#date').each(function() {
$(this).datepicker('clearDates');
});
You can used your popover html content in data-content='' attribute
<input type="text" data-content=' popover html paste here ' readonly id="PopS" data-placement="bottom" data-toggle="popover" data-html="true" placeholder="Quando" class="form-control" data-container="body"/>
Then write bellow script:
<script>
$("#PopS").popover({
html: true
}).on('shown.bs.popover', function () {
$('#date').datepicker({
format: 'dd/mm/yyyy',
});
});
</script>
Note: in this <div id="popover-content" class="hide"> remove
class="hide"
$('[data-toggle=popover]').on('show.bs.popover', function () {
$('#date').datepicker();
})
try this one.