jQuery add and remove class based on radio checked value - javascript

SOLVED - Thank you all for your time
I'm having a little trouble getting this one right. Basically I have two radio buttons with different values and I need to add and remove the class "active" from div's that pertain to the value of the radio button. See my code below:
HTML:
<li class="field">
<label>choose option:</label>
<label class="radio toggle" gumby-trigger="#phone" for="phoneOrWeb">
<input name="phoneOrWeb" id="phoneOrWeb" value="phone" type="radio">
<span></span> <strong>Phone</strong>
</label>
<label class="radio toggle" gumby-trigger="#web" for="phoneOrWeb">
<input name="phoneOrWeb" id="phoneOrWeb" value="web" type="radio">
<span></span> <strong>Web</strong>
</label>
</li>
<!-- Phone SUB -->
<div class="drawer" id="phone">
<?php include ('formD.php'); ?>
</div>
<!-- /Phone SUB -->
<!-- WEB SUB -->
<div class="drawer" id="web">
<?php include ('formE.php'); ?>
</div>
<!-- /WEB SUB -->
Jquery I attempted:
$("input[name=phoneOrWeb]:radio").click(function () {
if ($('input[name=phoneOrWeb]:checked').val() == "phone") {
$('#web').removeClass('active');
$('#phone').addClass('active');
} else if ($('input[name=phoneOrWeb]:checked').val() == "web") {
$('#web').addClass('active');
$('#phone').removeClass('active');
}
});

Your code is very close. First of all, IDs should always be unique. One element per ID on a page. phoneOrWeb is used twice which is not good. Secondly, if you don't want to do a second jQuery selection, you can just grab the value from the target of the event. This code should work as you expected.
$("input[name=phoneOrWeb]:radio").click(function(ev) {
if (ev.currentTarget.value == "phone") {
$('#web').removeClass('active');
$('#phone').addClass('active');
} else if (ev.currentTarget.value == "web") {
$('#web').addClass('active');
$('#phone').removeClass('active');
}
});
.drawer {
width: 100px;
height: 100px;
background-color: green;
margin: 4px;
}
.drawer.active {
border: 3px solid red;
margin: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="field">
<label>choose option:</label>
<label class="radio toggle" gumby-trigger="#phone" for="phoneInput">
<input name="phoneOrWeb" id="phoneInput" value="phone" type="radio">
<span></span> <strong>Phone</strong>
</label>
<label class="radio toggle" gumby-trigger="#web" for="webInput">
<input name="phoneOrWeb" id="webInput" value="web" type="radio">
<span></span> <strong>Web</strong>
</label>
</li>
<!-- Phone SUB -->
<div class="drawer" id="phone">
Phone!
<!--<?php include ('formD.php'); ?>-->
</div>
<!-- /Phone SUB -->
<!-- WEB SUB -->
<div class="drawer" id="web">
Web!
<!--<?php include ('formE.php'); ?>-->
</div>
<!-- /WEB SUB -->

$("input[name=phoneOrWeb]:radio").change(function () {
if ($(this).val() == "phone") {
$('#web').removeClass('active');
$('#phone').addClass('active');
} else if ($(this).val() == "web") {
$('#web').addClass('active');
$('#phone').removeClass('active');
}
});

Use the change event on the input. The below works.
$("input[name=phoneOrWeb]").change(function () {
if (this.value == "phone") {
$('#web').removeClass('active');
$('#phone').addClass('active');
} else if (this.value == "web") {
$('#web').addClass('active');
$('#phone').removeClass('active');
}
});
Fiddle: https://jsfiddle.net/04uhjuvc/
PS: ids should be unique, you have the same id in both the radio buttons.

You shoud check this one.
How to use radio on change event?
$(document).ready(function() {
$('input[type=radio][name=bedStatus]').change(function() {
if (this.value == 'allot') {
alert("Allot Thai Gayo Bhai");
}
else if (this.value == 'transfer') {
alert("Transfer Thai Gayo");
}
});
});

This depends that the Values of your Radios are equal to the target-element IDs:
$(".radio.toggle").on("click", function() {
$(".drawer").removeClass("active");
$("#"+$(this).val()).addClass("active");
});

You can make use of JQuery toggleClass for this to make it more simple:
$("input[name=phoneOrWeb]:radio").click(function () {
if (this.value == "phone")) {
$('#phone').toggleClass( "active" );
} else if (this.value == "web")) {
$('#web').toggleClass( "active" );
}
});

Try this:
<li class="field">
<label>choose option:</label>
<label class="radio toggle" gumby-trigger="#phone" for="phone-option">
<input id="phone-option" name="phoneOrWeb" value="phone" type="radio">
<span></span> <strong>Phone</strong>
</label>
<label class="radio toggle" gumby-trigger="#web" for="web-option">
<input id="web-option" name="phoneOrWeb" value="web" type="radio">
<span></span> <strong>Web</strong>
</label>
</li>
<div class="drawer" id="phone">phone</div>
<div class="drawer" id="web">web</div>
jQuery script:
<script>
$(document).ready(function () {
$('#phone-option').click(function () {
$('#web').removeClass("active");
$('#phone').addClass("active");
});
$('#web-option').click(function () {
$('#phone').removeClass("active");
$('#web').addClass("active");
});
});
</script>

Related

Product filtering based on custom data attribute

I am creating a product filter based on checkbox click. It should show and hide based on data-ftype and will match it with the id of the checkbox.
I saw this on StackOverflow but my version doesn't work, and I do not know why. I would be thankful for any help.
$('input[type="checkbox"]').click(function() {
if ($('input[type="checkbox"]:checked').length > 0) {
$('.c1 >a1').hide();
$('input[type="checkbox"]:checked').each(function() {
$('.c1 >a1[data-ftype=' + this.id + ']').show();
});
} else {
$('.c1 >a1').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="full" value="fullrim" />full<br/>
<input type="checkbox" id="half" value="halfrim" />half<br/>
<input type="checkbox" id="without" value="without" />without<br/>
<div class="c1">
<div class="a1" data-ftype="full">
abc
</div>
<div class="a1" data-ftype="half">
pqr
</div>
<div class="a1" data-ftype="without">
stuv
</div>
</div>
Please check the below code, it is working now
A fix has been given to selector instead of $('.c1 >a1') replaced with $('.c1 > .a1')
$('input[type="checkbox"]').click(function() {
if ($('input[type="checkbox"]:checked').length > 0) {
$('.c1 > .a1').hide();
$('input[type="checkbox"]:checked').each(function() {
$('.c1 > .a1[data-ftype=' + this.id + ']').show();
});
} else {
$('.c1 > .a1').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="full" value="fullrim" />full<br/>
<input type="checkbox" id="half" value="halfrim" />half<br/>
<input type="checkbox" id="without" value="without" />without<br/>
<div class="c1">
<div class="a1" data-ftype="full">
abc
</div>
<div class="a1" data-ftype="half">
pqr
</div>
<div class="a1" data-ftype="without">
stuv
</div>
</div>

How to use JQuery find and each together? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
I am printing row column table. In each of my column items have 2 checkbox,
<?php
for($b=0; $b<$RoomSize["COL"]; $b++){
?>
<div class="col">
<?php
$ColKeyExist = checkIfKeyExist($GetSeatLayout, $b, 2);
if($RowKeyExist){
if($ColKeyExist){
if($GetSeatLayout[$a]["ROWID"]==$a && $GetSeatLayout[$a]["COLUMNID"]==$b){
?>
<div id=<?=$a.",".$b?>>
<div class="form-check pl-0">
<input class="form-check-input" type="checkbox" name="SEATNO" value=<?=$a.",".$b?>>
<label class="fas fa-chair SEATIMAGE"></label>
<input class="form-check-input" type="checkbox" name="SEATSTATUS" value=0 >
</div>
</div>
</div>
<?php
}
}
}
?>
This is my JQUERY code. I try following the documentation but failed to achieve output
$(".col").click(function (e) {
$(this).find('input[type="checkbox"]').each(function (a) {
$(this).prop('checked', "checked");
});
});
When on click on the particular ".col" i want it to find all checkbox under it and check them,
Try this
$('.col input[type=checkbox]').each(function (){
//use one of the below
$(this).prop('checked', true);
$(this).attr('checked', true); // if your jQuery 1.5.x and below
});
You need some modification over there, see below snippet:
$(document).ready(function(){
$(".col").click(function (e) {
let col = $(this); // This line ensure you get outer scope where you clicking.
col.find('input[type="checkbox"]').each(function (a) {
col.find('input[type="checkbox"]').eq(a).prop('checked', "checked");
});
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<div id="col-1">
<div class="form-check pl-0">
<input class="form-check-input" type="checkbox" name="SEATNO">
<label class="fas fa-chair SEATIMAGE"></label>
<input class="form-check-input" type="checkbox" name="SEATSTATUS" value="0">
</div>
</div>
</div>
<div class="col">
<div id="col-2">
<div class="form-check pl-0">
<input class="form-check-input" type="checkbox" name="SEATNO" value="0">
<label class="fas fa-chair SEATIMAGE"></label>
<input class="form-check-input" type="checkbox" name="SEATSTATUS" value="0">
</div>
</div>
</div>
Or if you don't want iterate the checkbox and just checked them all inside .col then just you don't need trigger .each function you can simply write your code following way:
$(".col").click(function (e) {
$(this).find('input[type="checkbox"]').prop('checked', "checked");
});
$(document).ready(function () {
$(".col").click(function (e) {
console.log("success");
$(this).find('input[type="checkbox"]').each(function (a) {
var isChecked = $(this).prop('checked');
if(isChecked == true){
$(this).prop('checked', false);
}else if(isChecked == false){
$(this).prop('checked', true);
}
});
});
});

Bootstrap checkbox buttons not changing state

I used to have radio buttons, but I changed the script to use bootstrap checkboxes. But it is not changing the state when using bootstrap switches.
This is snippet of my code:
<div class="form-group">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="upd_active" class="updactive" id="upd_yes" value="1" checked> Yes </label>
<label class="radio-inline">
<input type="radio" name="upd_active" class="updactive" id="upd_no" value="0"> No </label>
</div>
</div>
<script>
function action(){}
var parentflag = $('#upd_yes').parents('.form-group');
parentflag.find('span').removeClass('checked');
if(is_active == "1"){
$("#upd_no").attr('checked', false);
$("#upd_yes").attr('checked', true);
$('#upd_yes').parent().addClass('checked');
}
else{
$("#upd_yes").attr('checked', false);
$("#upd_no").attr('checked', true);
$('#upd_no').parent().addClass('checked');
}
}
</script>
<div class="form-group">
<label class="col-md-3 control-label">IsActive<span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="checkbox" name="upd_active" class="make-switch updactive" id="upd_yes" value="1" checked>
</div>
</div>
<script>
function action(){
var parentflag = $('#upd_yes').parents('.form-group');
parentflag.find('span').removeClass('checked');
if(is_active == "1"){
$("#upd_yes").attr("checked",true);
$('#upd_yes').parent().addClass('checked');
}
else{
$("#upd_yes").attr("checked",false);
$('#upd_yes').parent().removeClass('checked');
}
}
</script>
How can I fix this?
Am able to find 2 issues(actually not issues) as below
is_active is not declared so you cannot check it with if statement
Most importantly your action() function not at all initiated.
So i added below code and updated the snippet.
var is_active = 0;
action();
var is_active = 0;
action();
function action() {
var parentflag = $('#upd_yes').parents('.form-group');
parentflag.find('span').removeClass('checked');
if (is_active == "1") {
$("#upd_yes").attr("checked", true);
$('#upd_yes').parent().addClass('checked');
} else {
$("#upd_yes").attr("checked", false);
$('#upd_yes').parent().removeClass('checked');
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-md-3 control-label">IsActive<span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="checkbox" name="upd_active" class="make-switch updactive" id="upd_yes" value="1" checked>
</div>
</div>

Show textfield in other div when radio checked

Alright, I've gone through lot of sources but I've got confused applying them all. I'm new to javascript and jquery.
I have a step by step choices (i got a wizard template). So I wanted to display a text field from the previous step/div when "wedding" radio button is checked.
my html code:
<div id="step-1">
<fieldset>
<input type="radio" id="theme1" name="cake_theme" value="wedding" onchange="see()" />
<input type="radio" id="theme2" name="cake_theme" value="bday" onchange="see()" />
<input type="radio" id="theme3" name="cake_theme" value="occassion" onchange="see()" />
</fieldset>
</div>
<div id="step-2">
Date: <input type="date" name="date_pick"/> //remains
<div class="wed_delivery"> Venue : <input type="text" name="wed_delivery" placeholder="Venue to Delivery"/> //only shows up when "wedding button" is checked
</div>
</div>
<div id="themedisplay" height="100px" width="300px"> </div>
I have in my JS in different file: (working fine)
function see(){
var canvas = document.getElementById('displaycake');
if (document.getElementById('theme1').checked) {
document.getElementById('themedisplay').innerHTML = "Wedding Cake";
}
if (document.getElementById('theme2').checked) {
document.getElementById('themedisplay').innerHTML = "Birthday Cake";
}
if (document.getElementById('theme3').checked) {
document.getElementById('themedisplay').innerHTML = "Occassion Cake";
}
}
I tried putting below the div "step-1"
<script>
$(document).ready(function () {
$(".wed_delivery").hide();
$("#theme1").click(function () { //theme1 is the Wedding Theme
$(".wed_delivery").show();
});
</script>
It doesn't work, is it possible in a Wizard Template?
Thanks in advance, comments each line are appreciated.
This will help you. Point to note.
1: Close your document.ready function properly.
2: Include JQuery if not included.
3: Bind the event with radio buttons and hide/show the text box if the checked radio is/is not wedding radio button
function see(){
var canvas = document.getElementById('displaycake');
if (document.getElementById('theme1').checked) {
document.getElementById('themedisplay').innerHTML = "Wedding Cake";}
if (document.getElementById('theme2').checked) {
document.getElementById('themedisplay').innerHTML = "Birthday Cake";}
if (document.getElementById('theme3').checked) {
document.getElementById('themedisplay').innerHTML = "Occassion Cake";}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="step-1">
<fieldset>
<input type="radio" id="theme1" name="cake_theme" value="wedding" onchange="see()" />
<input type="radio" id="theme2" name="cake_theme" value="bday" onchange="see()" />
<input type="radio" id="theme3" name="cake_theme" value="occassion" onchange="see()" /> </fieldset> </div>
<div id="step-2">
Date: <input type="date" name="date_pick"/> //remains
<div class="wed_delivery"> Venue : <input type="text" name="wed_delivery" placeholder="Venue to Delivery"/> //only shows up when "wedding button" is checked </div>
</div>
<div id="themedisplay" height="100px" width="300px"> </div>
<script>
$(document).ready(function () {
$(".wed_delivery").hide();
$("input[type='radio']").click(function () { //theme1 is the Wedding Theme
if($(this).val() == "wedding")
{
$(".wed_delivery").show();
}
else
{
$(".wed_delivery").hide();
}
});
});
</script>
Establish 2 classes to represent the status of off and on and assign the textbox the .off class initially. When the change event is triggered, then use .addClass() and .removeClass() jQuery methods.
There are too many changes to OP to explain, so I commented details in the Snippet:
SNIPPET
/* Shorthand for $(document).ready(function() { */
$(function() {
/* change event triggered by any radio button */
$(':radio').on('change', function() {
/* $(this) is the function owner,
| in this case it is the specific
| radio button being changed
*/
// Get radio value
var title = $(this).val();
// Get radio data-img
var img = $(this).data('img');
// Get url of background-image
var path = 'http://imgh.us/' + img;
// Set text of figcaption
$('#themeTitle').text(title);
// Set background-image of figure
$('#themeDisplay').css('background', 'url(' + path + ')no-repeat');
// if the checked radio id is 'theme1'...
if ($(this).attr('id') === 'theme1') {
//...status of textbox is on...
$('.wedDelivery').addClass('on').removeClass('off');
} else {
//...otherwise status of textbox is off
$('.wedDelivery').removeClass('on').addClass('off');
}
});
});
.off {
display: none;
}
.on {
display: inline-block;
}
#themeDisplay {
width: 300px;
height: 100px;
}
#themeTitle {
font: 700 16px/1.4 cursive;
color: black;
background: rgba(255, 255, 255, .6);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id='step1'>
<legend>Event Themes</legend>
<!--data-img represents the image file name can be manipulated by .attr() or .data()-->
<label>Wedding
<input type="radio" id="theme1" name="cakeTheme" value="Wedding" data-img='wedcake.jpg'>
</label>
<label>Birthday
<input type="radio" id="theme2" name="cakeTheme" value="Birthday" data-img='bdaycake.jpg'>
</label>
<label>Special Occasion
<input type="radio" id="theme3" name="cakeTheme" value="Special Occasion" data-img='speccake.jpg'>
</label>
</fieldset>
<fieldset id="step2">
<legend>Pick-up/Delivery</legend>
<label>Date:
<input type="date" name="datePick">
</label>
<label class='wedDelivery off'>Venue :
<input type="text" name="wedDelivery" placeholder="Venue to Delivery">
</label>
</fieldset>
<figure id="themeDisplay">
<figcaption id='themeTitle'></figcaption>
</figure>

How to link a checkbox(:checked) to a class?

I have setup a filter list which checkboxes. When the specific checkbox is checked, i need to interact with a class so it hides through JavaScript. Also, if multiple checkboxes are checked, i need to show these items with both the classes. I have this:
HTML:
<div class="categs" id="filters">
<div class="categhead">
<p>Ranking</p>
</div>
<div class="categsort">
<input class="hide-checkbox" type="checkbox" id="tagchallenger" value="challenger" style="display: none;">
<label for="tagchallenger">Challenger</label>
</div>
<div class="categsort">
<input class="hide-checkbox" type="checkbox" id="tagmaster" value="master" style="display: none;">
<label for="tagmaster">Master | Diamond</label>
</div>
<div class="categsort">
<input class="hide-checkbox" type="checkbox" id="tagplat" value="plat" style="display: none;">
<label for="tagplat">Platinum | Gold</label>
</div>
<div class="categsort">
<input class="hide-checkbox" type="checkbox" id="tagsilver" value="silver" style="display: none;">
<label for="tagsilver">Silver | Bronze</label>
</div>
<script type="text/javascript">
[].forEach.call(document.querySelectorAll('.hide-checkbox'), function(element) {
element.style.display = 'none';
});
</script>
</div>
JavaScript:
var streameach = $('.streampic .row .col-md-4');
function updateContentVisibility(){
var checked = $('#filters :checkbox:checked');
if(checked.length){
streameach.hide();
checked.each(function() {
$("." + $(this).val()).show();
});
} else {
streameach.show();
}
}
$('#filters :checkbox').click(updateContentVisibility);
updateContentVisibility();
}
And then i also have
<div class="streamtag1">...</div>
And
var stream0 = "<? echo $lolarray->streams[0]->channel->name; ?>";
if (stream0 == "riotgames") {
$('streamtag1').addClass('master');
};
Now when the checkbox 'master' is clicked, it hides all the divs, but doesn't show the ones that have the added master class,which should be connected to that checkbox.
I would set it up like the below:
Here's a jsFiddle
function updateContentVisibility() {
$('.hide-checkbox').each(function () {
if ($(this).is(':checked')) {
$('.' + $(this).val()).hide();
} else $('.' + $(this).val()).show();
});
}
$('.hide-checkbox').change(function () {
updateContentVisibility();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="categsort">
<input class="hide-checkbox" type="checkbox" id="tagriot" value="riot">
<label for="tagriot">RIOT</label>
<input class="hide-checkbox" type="checkbox" id="tagblue" value="blue">
<label for="tagblue">blue</label>
<input class="hide-checkbox" type="checkbox" id="taggreen" value="green">
<label for="taggreen">green</label>
<input class="hide-checkbox" type="checkbox" id="tagred" value="red">
<label for="tagred">red</label>
</div>
<div class="riot">riot</div>
<br>
<div class="blue">blue</div>
<br>
<div class="green">green</div>
<br>
<div class="red">red</div>
<br>
Given the question description, and some clarification in the comments to that question, I'd suggest the following approach, using jQuery:
// selecting the <input> elements of class-name 'hide-checkbox',
// binding an anonymous function to handle the 'change' event:
$('input.hide-checkbox').on('change', function () {
// selecting all elements whose class-name is equal to the
// <input> element's value, and using the toggle(switch)
// approach, to show if the switch is true (the checkbox is checked)
// and hide if the switch is false (the checkbox is unchecked):
$('.' + this.value).toggle(this.checked);
// triggering the change event, so that the function runs on page-load,
// to hide/show as appropriate:
}).change();
[].forEach.call(document.querySelectorAll('.hide-checkbox'), function(element) {
element.style.display = 'none';
});
$('input.hide-checkbox').on('change', function() {
$('.' + this.value).toggle(this.checked);
}).change();
label {
cursor: pointer;
}
input:checked + label {
color: #f90;
}
#contents div[class] {
border: 1px solid #000;
border-radius: 1em;
padding: 0.5em;
margin: 0 auto 0.5em auto;
width: 80%;
}
#contents div[class]::before {
content: attr(class);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="categs" id="filters">
<div class="categhead">
<p>Ranking</p>
</div>
<div class="categsort">
<input class="hide-checkbox" type="checkbox" id="tagchallenger" value="challenger" style="display: none;" />
<label for="tagchallenger">Challenger</label>
</div>
<div class="categsort">
<input class="hide-checkbox" type="checkbox" id="tagmaster" value="master" style="display: none;" />
<label for="tagmaster">Master | Diamond</label>
</div>
<div class="categsort">
<input class="hide-checkbox" type="checkbox" id="tagplat" value="plat" style="display: none;" />
<label for="tagplat">Platinum | Gold</label>
</div>
<div class="categsort">
<input class="hide-checkbox" type="checkbox" id="tagsilver" value="silver" style="display: none;" />
<label for="tagsilver">Silver | Bronze</label>
</div>
</div>
<div id="contents">
<div class="challenger"></div>
<div class="master"></div>
<div class="plat"></div>
<div class="silver"></div>
</div>
External JS Fiddle demo, for experiementation.
Or, with plain JavaScript:
// creating a named function to handle the show/hide functionality:
function toggleView() {
// a cached reference to the changed <input>:
var control = this,
// a reference to whether the <input> is checked or not:
check = control.checked,
// retrieving all elements with a class-name equal to the
// <input> element's value:
targets = document.querySelectorAll('.' + control.value);
// using Array.prototype.forEach(), with Function.prototype.call(),
// to iterate over the found elements:
Array.prototype.forEach.call(targets, function (node) {
// setting the display property of each found-element's
// style property; if the checkbox is checked we set
// the display to 'block', if not we set it to 'none':
node.style.display = check ? 'block' : 'none';
});
}
// creating a 'change' event so that we can trigger the function
// to run on page-load:
var changeEvent = new Event('change');
// As above, iterating over the '.hide-checkbox' elements:
Array.prototype.forEach.call(document.querySelectorAll('.hide-checkbox'), function (element) {
// hiding the elements:
element.style.display = 'none';
// binding the named function (toggleView)
// to handle the change event:
element.addEventListener('change', toggleView);
// triggering the change event on each of the
// '.hide-checkbox' elements:
element.dispatchEvent(changeEvent);
});
function toggleView() {
var control = this,
check = control.checked,
targets = document.querySelectorAll('.' + control.value);
Array.prototype.forEach.call(targets, function (node) {
node.style.display = check ? 'block' : 'none';
});
}
var changeEvent = new Event('change');
Array.prototype.forEach.call(document.querySelectorAll('.hide-checkbox'), function (element) {
element.style.display = 'none';
element.addEventListener('change', toggleView);
element.dispatchEvent(changeEvent);
});
label {
cursor: pointer;
}
input:checked + label {
color: #f90;
}
#contents div[class] {
border: 1px solid #000;
border-radius: 1em;
padding: 0.5em;
margin: 0 auto 0.5em auto;
width: 80%;
}
#contents div[class]::before {
content: attr(class);
}
<div class="categs" id="filters">
<div class="categhead">
<p>Ranking</p>
</div>
<div class="categsort">
<input class="hide-checkbox" type="checkbox" id="tagchallenger" value="challenger" style="display: none;" />
<label for="tagchallenger">Challenger</label>
</div>
<div class="categsort">
<input class="hide-checkbox" type="checkbox" id="tagmaster" value="master" style="display: none;" />
<label for="tagmaster">Master | Diamond</label>
</div>
<div class="categsort">
<input class="hide-checkbox" type="checkbox" id="tagplat" value="plat" style="display: none;" />
<label for="tagplat">Platinum | Gold</label>
</div>
<div class="categsort">
<input class="hide-checkbox" type="checkbox" id="tagsilver" value="silver" style="display: none;" />
<label for="tagsilver">Silver | Bronze</label>
</div>
</div>
<div id="contents">
<div class="challenger"></div>
<div class="master"></div>
<div class="plat"></div>
<div class="silver"></div>
</div>
External JS Fiddle demmo for experiementation/development.
References:
JavaScript:
Array.prototype.forEach().
document.querySelectorAll().
Event() constructor.
EventTarget.addEventListener().
Event.target.dispatchEvent().
Function.prototype.call().
jQuery:
change().
on().
toggle().

Categories

Resources