I have several checkboxes when clicking on a certain checkbox, I want to show some content (in my case, this is a simple block for an example) when clicking on another checkbox, the previous block should hide and display a new block, I think to solve this problem you need to apply forEach checkboxes work for me, but I cannot display blocks
<div class="toggle-two">
<div><small>content 1</small></div>
<label class="switch-label">
<input class="switch" id="switch-novice" value="switch-novice" type="checkbox"/>
<span class="slider round"></span>
</label>
</div>
<div class="toggle-three">
<div><small>content 2</small></div>
<label class="switch-label">
<input class="switch" id="switch-intermediate" value="switch-intermediate" type="checkbox"/>
<span class="slider round"></span>
</label>
</div>
<div class="toggle-four">
<div><small>content 3</small></div>
<label class="switch-label">
<input class="switch" id="switch-expert" value="switch-expert" type="checkbox" />
<span class="slider round"></span>
</label>
</div>
<!-- ------------------------------------------- -->
</div>
<div>
<div class="content c1"></div>
<div class="content c2"></div>
<div class="content c3"></div>
</div>
**script.js**
let uploadPres = document.getElementsByClassName("content");
$(".content").each(function (index, value) {
$(`.switch:not([checked])`).on("change", function (param1, param2) {
$(".switch").not(this).prop("checked", false);
if ($(".switch").is(":checked")) {
console.log(this.checked);
}
});
});
Initially a class named content has display: none by default
You can also see this example in codesandbox
on each input checkbox add the reference of the associated content div like below.
<input class="switch" id="switch-novice" value="switch-novice" type="checkbox" data-content="c1"/>
OR
<input class="switch" id="switch-novice" value="switch-novice" type="checkbox" data-content="c2"/>
Now simply update your code like below.
$(`.switch`).on("change", function (a, b) {
$(".switch").not(this).prop("checked", false);
if ($(".switch").is(":checked")) {
var contentToOpen = $(this).data("content"); // read the associated class of the div
$(`.content`).hide(); // hide all existing opened ones
$(`.${contentToOpen}`).show(); // show the associated one
}
});
function toggle(event){
var container = event.target.closest(".togglers");
var currentContainer = event.target.closest(".toggle");
var index = Array.from(container.children).indexOf(currentContainer);
var checkboxes = document.querySelectorAll(".toggle input");
$(checkboxes).prop("checked",false);
$(event.target).prop("checked", true);
var contentItems = document.querySelectorAll(".content-items .content");
$(contentItems).hide();
var content = contentItems[index];
$(content).slideToggle();
}
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togglers">
<div class="toggle"><input type="checkbox" onclick="toggle(event)" />
toggle 1
</div>
<div class="toggle"><input type="checkbox" onclick="toggle(event)" />
toggle 2
</div>
<div class="toggle"><input type="checkbox" onclick="toggle(event)" />
toggle 3
</div>
</div>
<div class="content-items">
<div class="content">Content 1</div>
<div class="content">Content 2</div>
<div class="content">Content 3</div>
</div>
Related
Hello I'm fairly new to jQuery (and stackoverflow), i saw a few questions about showing/hiding div for checkbox but i couldn't find a solution that apply for several checkboxes at the same time.
I would like to make it work so that when my first checkbox is checked, the 1st div/panel just after is shown then hiden when uncheck. And the same thing for my second checkbox with its own panel.
Right now, both panel are shown when first checkbox (or second checkbox) is checked.
I don't know how to make it so the panel shown or hidden will be dependant of the checkbox (li?).
I would like a solution that could apply without touching the code when adding new checkboxes, so i think maybe ID shouldn't be use, right? is there any solution?
Your help is much appreciated!
Thanks in advance!
HTML :
<ul class="form-check-list">
<li class="js-tabCheck">
<label for="coupon" class="check">
<input type="checkbox" id="coupon" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON</span>
<span class="txt-notice txt-indent">-50%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
<li class="js-tabCheck">
<label for="coupon1" class="check">
<input type="checkbox" id="coupon1" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON1</span>
<span class="txt-notice txt-indent">-30%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
</ul>
JQUERY:
$(function(){
var checkbox = $('.js-tabCheck-trigger'),
panel = $('.js-tabCheck-panel');
panel.hide();
checkbox.change(function(){
if($(this).is(':checked')){
panel.show();
} else {
panel.hide();
};
});
});
by using the children method, you can call the respective div element.
and used 'parents' to access the outside element.
$(function(){
var checkbox = $('.js-tabCheck-trigger'),
panel = $('.js-tabCheck-panel');
panel.hide();
checkbox.change(function(){
if($(this).is(':checked')){
$(this).parents('li').children('.js-tabCheck-panel').show();
} else {
$(this).parents('li').children('.js-tabCheck-panel').hide();
};
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="form-check-list">
<li class="js-tabCheck">
<label for="coupon" class="check">
<input type="checkbox" id="coupon" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON</span>
<span class="txt-notice txt-indent">-50%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
<li class="js-tabCheck">
<label for="coupon1" class="check">
<input type="checkbox" id="coupon1" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON1</span>
<span class="txt-notice txt-indent">-30%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
</ul>
I have a checkbox that is embedded inside a div as depicted in the following HTML:
<div>
<div class="ms-Checkbox is-checked is-enabled root-751">
<input type="checkbox" data-automation-id="ProductSkuId_18181a46-0d4e-45cd-891e-60aabd171b4e" class="input-521" id="checkbox-886" aria-label="Office 365 E1" aria-describedby="LicenseSubText_18181a46-0d4e-45cd-891e-60aabd171b4e" aria-checked="true" value="18181a46-0d4e-45cd-891e-60aabd171b4e" checked="">
<label class="ms-Checkbox-label label-738" for="checkbox-886">
<div class="ms-Checkbox-checkbox checkbox-752">
<i data-icon-name="CheckMark" aria-hidden="true" class="ms-Checkbox-checkmark checkmark-754"></i>
</div>
<div class="css-742">
<div class="css-743" data-automation-id="LicenseText_Office 365 E1">Office 365 E1</div>
</div>
</label>
</div>
<div class="css-736" id="LicenseSubText_18181a46-0d4e-45cd-891e-60aabd171b4e" data-automation-id="LicenseSubText_18181a46-0d4e-45cd-891e-60aabd171b4e">
<div class="css-735">12 of 591 licenses available</div>
</div>
</div>
As we can see from the above, there is an input of type "checkbox" and if I use the following javascript:
$("#checkbox-886").prop('checked', false);
The box is still checked. I have also tried the following:
document.getElementById("checkbox-886").removeAttribute("checked")
and it is still not removing the checkmark from the checkbox although i see that checked attribute has been removed from the input.
I am guessing that the div surrounding the checkbox is also responsible because i see the "is-checked" attribute and I am not sure how to write javascript that would force changes on the parent elements when the child element is changed through javascript. Any help or insight would be greatly appreciated. Thanks in advance.
Please remove checked="" from your control(<input type="checkbox" data-automation-id)
If you want to check your checkbox then do it from java script only.
So, your code will be like
<div>
<div class="ms-Checkbox is-checked is-enabled root-751">
<input type="checkbox" data-automation-id="ProductSkuId_18181a46-0d4e-45cd-891e-60aabd171b4e" class="input-521" id="checkbox-886" aria-label="Office 365 E1" aria-describedby="LicenseSubText_18181a46-0d4e-45cd-891e-60aabd171b4e" aria-checked="true" value="18181a46-0d4e-45cd-891e-60aabd171b4e">
<label class="ms-Checkbox-label label-738" for="checkbox-886">
<div class="ms-Checkbox-checkbox checkbox-752">
<i data-icon-name="CheckMark" aria-hidden="true" class="ms-Checkbox-checkmark checkmark-754"></i>
</div>
<div class="css-742">
<div class="css-743" data-automation-id="LicenseText_Office 365 E1">Office 365 E1</div>
</div>
</label>
</div>
<div class="css-736" id="LicenseSubText_18181a46-0d4e-45cd-891e-60aabd171b4e" data-automation-id="LicenseSubText_18181a46-0d4e-45cd-891e-60aabd171b4e">
<div class="css-735">12 of 591 licenses available</div>
</div>
</div>
and javascript will be
document.getElementById("checkbox-886").checked=false;
The element probably hasn't been loaded when you tried to uncheck it. Add an event listener to DOMContentLoaded:
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("checkbox-886").checked = false
});
<div>
<div class="ms-Checkbox is-checked is-enabled root-751">
<input type="checkbox" data-automation-id="ProductSkuId_18181a46-0d4e-45cd-891e-60aabd171b4e" class="input-521" id="checkbox-886" aria-label="Office 365 E1" aria-describedby="LicenseSubText_18181a46-0d4e-45cd-891e-60aabd171b4e" aria-checked="true" value="18181a46-0d4e-45cd-891e-60aabd171b4e"
checked="">
<label class="ms-Checkbox-label label-738" for="checkbox-886">
<div class="ms-Checkbox-checkbox checkbox-752">
<i data-icon-name="CheckMark" aria-hidden="true" class="ms-Checkbox-checkmark checkmark-754"></i>
</div>
<div class="css-742">
<div class="css-743" data-automation-id="LicenseText_Office 365 E1">Office 365 E1</div>
</div>
</label>
</div>
<div class="css-736" id="LicenseSubText_18181a46-0d4e-45cd-891e-60aabd171b4e" data-automation-id="LicenseSubText_18181a46-0d4e-45cd-891e-60aabd171b4e">
<div class="css-735">12 of 591 licenses available</div>
</div>
</div>
Remove checked = "" from input tag.
Then the javascript will work correctly.
$("#checkbox-886").prop('checked', false);
My goal is to have a functionality that when a user clicks on "Label - Filter 1" then the content within div - "Filter_1_Content" appears and the other two divs slide down simultanously. However, when a user clicks on "Label - Filter 2", the content of "Filter 1" should disappear and "Filter 2" should appear while "Filter 3" slides down simoultanously. The same applys to Filter 3 and so on. Please note that at the first load of the page, only the labels should appear.
This is the jQuery code I currently have and it works for Filter 1. However, the Filter 2 and Filter 3 do not move. Any ideas?
<div id="Filter_1">
<label id="Filter1_Label">Filter 1</label>
<div id="Filter_1_Content" class"Filters">
...content
</div>
</div>
<div id="Filter_2">
<label id="Filter2_Label">Filter 2</label>
<div id="Filter_2_Content" class"Filters">
...content
</div>
</div>
<div id="Filter_3">
<label id="Filter2_Label">Filter 3</label>
<div id="Filter_3_Content" class"Filters">
...content
</div>
</div>
function SlideDiv() {
var scopeFilters = $("#Filter1_Label").next(".Filters");
if (scopeFilters.is(":hidden")) {
scopeFilters.slideDown('fast');
} else {
scopeFilters.slideUp('fast');
}
};
To achieve what you need most effectively, you can use common classes and DOM traversal to apply the common logic to a repeated HTML structure. Try this:
var $content = $('.filter-container > div');
$('.filter-container label').click(function() {
var $target = $(this).next('div');
$content.not($target).slideUp('fast');
$target.slideToggle('fast');
});
.filter-container > div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-container">
<label>Filter 1</label>
<div class="filters">
Content...
</div>
</div>
<div class="filter-container">
<label>Filter 2</label>
<div class="filters">
Content...
</div>
</div>
<div class="filter-container">
<label>Filter 3</label>
<div class="filters">
Content...
</div>
</div>
As you can see from the above, using incremental id attributes is making much more (unnecessary) work for yourself, and would result in much more complex JS code for absolutely no benefit.
you can try below logic where you can find parent div and then it's siblings to find other filter divs.
Slide up other filter divs and slideup clicked filter div.
$(function(){
$("div[id^='Filter_'] label").on("click", function(){
var $parent = $(this).closest("div");
$parent.siblings().find("div.Filters").slideUp("fast");
$(this).next("div.Filters").slideToggle("fast");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="Filter_1">
<label>Filter 1</label>
<div id="Filter_1_Content" class="Filters">
...content
</div>
</div>
<div id="Filter_2">
<label>Filter 2</label>
<div id="Filter_2_Content" class="Filters">
...content
</div>
</div>
<div id="Filter_3">
<label>Filter 3</label>
<div id="Filter_3_Content" class="Filters">
...content
</div>
</div>
I am making a theme changer in my framework7 app, here is the code of color changer using radio button
<ul id="bluegr">
<label class="label-radio item-content">
<input type="radio" name="color-radio" value="blue" checked>
<div class="item-inner">
<div class="item-title">Blue</div>
</div>
</label>
</ul>
<ul id="graygr">
<label class="label-radio item-content">
<input type="radio" name="color-radio" value="gray">
<div class="item-inner">
<div class="item-title">Gray</div>
</div>
</label>
</ul>
And here is theme changer
<ul>
<li>
<label class="label-radio item-content">
<input type="radio" name="layout-radio" value="layout-dark" checked>
<div class="item-inner">
<div class="item-title">Dark</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="layout-radio" value="layout-white">
<div class="item-inner">
<div class="item-title">Light</div>
</div>
</label>
</li>
</ul>
And here is the javascript of making those color and theme changer work
var myApp = new Framework7();
var $$ = Dom7;
$$('input[name="color-radio"]').on('change', function () {
if (this.checked) {
$$('.view').removeClass('theme-blue theme-gray theme-lightblue');
$$('.view').addClass('theme-' + $$(this).val());
}
});
$$('input[name="layout-radio"]').on('change', function () {
if (this.checked) {
$$('.view').removeClass('layout-dark layout-white');
$$('.view').addClass(this.value);
}
});
Demo: http://qa.ftios.net/61-2
But when I try it out, it does change the color and theme but when I reload and it reverts back to default, so how can I fix this?
You haven't stored the selection anywhere so every time you reload the page the DOM will just revert back to the original state.
The simplest way would be to save the selection to localStorage and upon that module/page being called, you simply check to see if the item exists and if it does, based on its value, you would set the theme to that.
I have a development issue with jQuery script. I've tried to find something to re-purpose but have not been able to find exactly what I need. So I took a stab at writing something but have yet to get it to work correctly and I'm such a novice that I cannot seem to figure it out.
I am trying to get 2 radio buttons (first grouping of 3, second grouping of 2) to return 1 of 6 div tags on selection of both radio buttons.
I only wrote enough script for just clinical with either sales or support options.
html:
<div class="input-quest">Question 1</div>
<div id="optSelectBU">
<input type="radio" name="button1" value="clinical" />
<label>Clinical</label>
<input type="radio" name="button1" value="financial" />
<label>Financial</label>
<input type="radio" name="button1" value="pharmacy" />
<label>Pharmacy</label>
</div>
<div class="input-quest">Question 2</div>
<div id="optSelectService">
<input type="radio" name="button2" value="support" />
<label>Support</label>
<input type="radio" name="button2" value="sales" />
<label>Sales</label>
</div>
<div id="Clinical-Support">
<div class="block">
<div class="input-quest">Div 1</div>
</div>
</div>
<div id="Clinical-Sales">
<div class="block">
<div class="input-quest">Div 2</div>
</div>
</div>
<div id="Financial-Support">
<div class="block">
<div class="input-quest">Div 3</div>
</div>
</div>
<div id="Financial-Sales">
<div class="block">
<div class="input-quest">Div 4</div>
</div>
</div>
<div id="Pharmacy-Support">
<div class="block">
<div class="input-quest">Div 5</div>
</div>
</div>
<div id="Pharmacy-Sales">
<div class="block">
<div class="input-quest">Div 6</div>
</div>
</div>
Script:
$(document).ready(function () {
$("#Clinical-Support").hide();
$("#Clinical-Sales").hide();
$("#Financial-Support").hide();
$("#Financial-Sales").hide();
$("#Pharmacy-Support").hide();
$("#Pharmacy-Sales").hide();
$("#optSelectBU").change(function () {
if ($('input[name=button1]').val() == "clinical" && $('input[name=button2]').val() == "sales") {
$("#Clinical-Sales").show();
} else {
$("#Clinical-Support").hide();
$("#Clinical-Sales").hide();
$("#Financial-Support").hide();
$("#Financial-Sales").hide();
$("#Pharmacy-Support").hide();
$("#Pharmacy-Sales").hide();
}
});
$("#optSelectBU").change(function () {
if ($('input[name=button1]').val() == "clinical" && $('input[name=button2]').val() == "support") {
$("#Clinical-Support").show();
} else {
$("#Clinical-Support").hide();
$("#Clinical-Sales").hide();
$("#Financial-Support").hide();
$("#Financial-Sales").hide();
$("#Pharmacy-Support").hide();
$("#Pharmacy-Sales").hide();
}
});
});
Here is fiddle link:
http://jsfiddle.net/schoward30506/LV5nQ/3/
Its not pretty, but if you use data-attributes rather than the id then you could simplify your code massively:
$(document).ready(function () {
$("div[data-cats]").hide();
$("input[name=button1], input[name=button2]").change(function () {
var b1 = $('input[name=button1]:checked').val();
var b2 = $('input[name=button2]:checked').val();
$("div[data-cats]").hide();
$("div[data-cats='"+b1+" "+b2+"']").show();
});
});
http://jsfiddle.net/LV5nQ/6/
i fiddled around and came to this solution.
please keep in mind, that i added a div#container around your changing divs.
http://jsfiddle.net/honk1/LV5nQ/10/
$(document).ready(function () {
$("#container > div").hide();
var input1, input2;
function checkboxChecker() {
if ( input1 === "clinical" && input2 === "sales" ) {
$("#Clinical-Sales").show().siblings("div").hide();
} else if ( input1 === "clinical" && input2 === "support" ) {
$("#Clinical-Support").show().siblings("div").hide();
} else {
$("#container > div").hide();
}
};
$("input[name=button1], input[name=button2]").change(function () {
input1 = $('input[name=button1]:checked').val();
input2 = $('input[name=button2]:checked').val();
checkboxChecker();
});
});