jQuery show only divs with multiple matching classes from radio buttons - javascript

I am trying to create a system to filter through some tags by hiding and showing the appropriate items. The idea is that you could select one radio button and it will show only the divs with the class matching the radio buttons ID. If you select multiple radio buttons, it would use all of the select ID's to create the class match.
Here is the markup I have now:
<h2>Brand</h2>
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Canon" />
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Epson" />
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_HP" />
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Lexmark" />
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Xerox" />
<h2>Type</h2>
<input type="radio" class="prodFilter" name="typeFilter" id="typ_Genuine" />
<input type="radio" class="prodFilter" name="typeFilter" id="typ_QualityRestored" />
<div class="prdbx brnd_Epson typ_Genuine">Product A</div>
<div class="prdbx brnd_Canon typ_Genuine">Product B</div>
<div class="prdbx brnd_Epson typ_QualityRestored">Product C</div>
<div class="prdbx brnd_Lexmark typ_Genuine">Product D</div>
<div class="prdbx brnd_Canon typ_QualityRestored">Product E</div>
I have some jQuery that is getting the ID correctly, but it isn't showing the correct divs. If Epson is selected, then Genuine, all Genuine products display; instead of only Genuine Epson products.
The jQuery I have so far is below:
jQuery(document).ready(function(){
$('.prodFilter').one("click", function () {
$('.prdbx').hide(); // hide all products
});
// we clicked a filter
$('.prodFilter').click(function(e){
// for each clicked filter
$('.prodFilter').each(function(e) {
if($(this).is(":checked")){
var thisFilter = this.id;
$('.'+thisFilter).show(); // display the chosen products
}
});
});
});
Any help would be greatly appreciated!

What you need here is change your each() statement, use the each to loop just through the :checked radio buttons and then construct your Jquery selector from those values:
jQuery(document).ready(function() {
$('.prodFilter').one("click", function() {
$('.prdbx').hide();
});
$('.prodFilter').click(function(e) {
$('.prdbx').hide();
var thisFilter = "";
$('.prodFilter:checked').each(function(e) {
thisFilter += '.'+this.id;
});
$(thisFilter).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Brand</h2>
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Canon" />
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Epson" />
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_HP" />
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Lexmark" />
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Xerox" />
<h2>Type</h2>
<input type="radio" class="prodFilter" name="typeFilter" id="typ_Genuine" />
<input type="radio" class="prodFilter" name="typeFilter" id="typ_QualityRestored" />
<div class="prdbx brnd_Epson typ_Genuine">Product A</div>
<div class="prdbx brnd_Canon typ_Genuine">Product B</div>
<div class="prdbx brnd_Epson typ_QualityRestored">Product C</div>
<div class="prdbx brnd_Lexmark typ_Genuine">Product D</div>
<div class="prdbx brnd_Canon typ_QualityRestored">Product E</div>

Related

Get all radio inputs from dynamically generated divs

I have a series of dynamically generated div that each one has 4 radio buttons inside:
$(".wrapper").on("custom", ".item", function(){
$.each($(".item"),function(){
// Get all radio names and check if at least one is checked
var radio_groups = [];
$.each($(this).find('input[type="radio"]'), function(){
var myname= this.name;
if($.inArray( myname, radio_groups ) < 0){
radio_groups.push(myname);
}
});
console.log(radio_groups);
return false;
// Check if there is a radio selected for each radio group
for(var i=0; i<radio_groups.length; i++) {
if($(this).find('input[type="radio"][name="' + radio_groups[i] + '"]:checked').length <= 0) {
// $('input[type="radio"][name="' + radio_groups[i] + '"]').first().closest('.row').append('<p class="input-error">Please select one option.</p>');
$('input[type="radio"][name="' + radio_groups[i] + '"]').first().closest('.condition').append('<p class="input-error">Please select one option.</p>');
errors = true;
}
}
})
})
$('.item').trigger("custom");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
</div>
I have tried this but doesn't seem to work, mostly the problem is that the .item divs are dynamically generated with php.
I probably didn't understand the problem but why not just use querySelectorAll with a simple forEach like that:
let result = [];
document.querySelectorAll('.item').forEach((el) =>{
const radioboxname = el.querySelectorAll('input[type="radio"]')[0].name;
if(!result.includes(radioboxname)){
result.push(radioboxname);
}
});
console.log(result);
<div class="wrapper">
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
</div>
<div class="item">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
</div>
<div class="item">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
</div>
</div>
After comment by OP
I add an array and instead of select all radios i select all item divs and check the name of first radio button compare with array and include if wasn't include

jQuery multi-row form: disable submit until each row has a radio checked

I have a multi-row form with single choice radio buttons in each row. I'd like the final <button> tag to be disabled until a radio button as been checked from each row.
I currently have a solution from a previous question (jQuery multi-step form: disable 'next' button until input is filled in each section) that removes the disabled attribute from the button when you select any radio button but i'd like to be more specific if possible.
Is this possible? Here's a Codepen of what I'm working on currently: https://codepen.io/abbasarezoo/pen/vdoMGX - as you can see when hit any radio in any row the disabled attribute comes off.
HTML:
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-2" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-3" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-4" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-5" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-6" />
</div>
<button disabled>Next</button>
</fieldset>
</form>
jQuery:
$('fieldset input').click(function () {
if ($('input:checked').length >= 1) {
$(this).closest('fieldset').find('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
You need to specify the same name for the radio button group so that only one radio button is selected per row. Then, you can simply compare the length of the checked radio button with the length of the radio button group like this,
$('fieldset input').click(function () {
var radioLength = $('.radio-group').length;
if ($('input:checked').length == radioLength) {
$('fieldset button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-1" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-2" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-2" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-2" />
</div>
<button disabled>Next</button>
</fieldset>
</form>

JQuery Select All Chekboxes Using Label For

I am using a jquery plugin called magic-check, to create styled checkboxes. The checkboxes are displayed using the following example code:
<input type="checkbox" class="magic-checkbox" value="4140" id="4140" name="chc">
<label for="4140"></label>
I am having issues creating a select all button. I think the css on magic-check hides the checkbox and styles the label. I have tried numerous methods to solve, but no luck.
In pure javaScript you can write:
document.querySelectorAll('.magic-checkbox[type="checkbox"]').forEach(function(ele, idx) {
ele.setAttribute('checked', 'checked');
});
Instead, in jQuery you can write:
$(':checkbox.magic-checkbox').prop('checked', 'checked');
An example:
$('#selectall').on('click', function(e) {
$(':checkbox.magic-checkbox').prop('checked', 'checked');
});
$('#unSelectall').on('click', function(e) {
$(':checkbox.magic-checkbox').prop('checked', '');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/forsigner/magic-check/master/css/magic-check.min.css">
<div>
<input class="magic-checkbox" type="checkbox" name="layout" id="1">
<label for="1">Normal</label>
</div>
<div>
<input class="magic-checkbox" type="checkbox" name="layout" id="2" checked="checked">
<label for="2">Checked</label>
</div>
<div>
<input class="magic-checkbox" type="checkbox" name="layout" id="3" disabled="disabled">
<label for="3">
Disabled
</label>
</div>
<div>
<input class="magic-checkbox" type="checkbox" name="layout" id="4" checked disabled="disabled">
<label for="4">Checked && Disabled</label>
</div>
<div>
<input type="checkbox" class="magic-checkbox" value="4140" id="4140" name="chc">
<label for="4140"></label>
</div>
<br>
<br>
<button type="button" id="selectall">Select all checkboxes</button>
<button type="button" id="unSelectall">Unselect all checkboxes</button>
The first solution will scan your page for labels and check the corresponding input with a matching id. The second and third solutions are just efficient ways of checking all your check boxes on the page.
$('#check-all').on('click', function(){
$('label').each( function() {
var target = $(this).attr('for');
$('input[id="' + target + '"]').prop('checked', true);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="1">1</label>
<input id="1" type="checkbox"/>
<label for="2">2</label>
<input id="2" type="checkbox"/>
<button id="check-all">Check All</button>
Solution: Checking all check boxes on the page with Vanilla JS.
var inputs = document.getElementsByTagName('input');
var button = document.getElementById('check-all');
button.addEventListener('click', function(){
for ( var input in inputs ) {
inputs[input].checked = true;
}
})
<label for="1">1</label>
<input id="1" type="checkbox"/>
<label for="2">2</label>
<input id="2" type="checkbox"/>
<button id="check-all">Check All</button>
Solution: Checking all check boxes on the page with jQuery.
$('#check-all').on('click', function(){
$('input').each( function() {
this.checked = true;
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="1">1</label>
<input id="1" type="checkbox"/>
<label for="2">1</label>
<input id="2" type="checkbox"/>
<button id="check-all">Check All</button>

jquery show / hide of div on selection of related radio button

This is my jquery code
$(document).ready(function() {
$("div.imgDisp").hide();
$('[id="' + $(":radio:checked").val()+'"]').show();
$('input[name="rdNumber"]:radio').click(function() {
$("div.imgDisp").fadeOut('slow');
$('[id="' + $(this).val()+'"]').fadeIn('slow');
});
});
this is html code
<div class="wrapper"> <strong><span>*</span> Number</strong>
<div class="formText">
<input type="radio" name="rdNumber" value="100" />100
<input type="radio" name="rdNumber" value="200" checked="checked"/>200
<input type="radio" name="rdNumber" value="300" />300</div>
</div>
<input type="radio" name="rdImage" value="preExisting" />Choose from images below
<div id="100" class="imgDisp">
<div class="heading">10x10</div>
<input type="radio" name="preExistingImage" id="100" value="10x10-1"
/>
<img src="1-1.png">
<input type="radio" name="preExistingImage" id="100" value="10x10-2" />
<img src="1-2.png">
</div>
<div id="200" class="imgDisp">
<div class="heading">10x20</div>
<input type="radio" name="preExistingImage" id="200" value="10x20-1"
/>
<img src="2-1.png">
<input type="radio" name="preExistingImage" id="200" value="10x20-2" />
<img src="2-2.png">
</div>
<div id="200" class="imgDisp">
<div class="heading">20x10</div>
<input type="radio" name="preExistingImage" id="200" value="20x10-1"
/>
<img src="3-1.png">
<input type="radio" name="preExistingImage" id="200" value="20x10-2" />
<img src="3-2.png" width="20" height="10">
</div>
The code is working fine
on choosing 100 radio button it is showing div with id = 100 and on selecting id = 200 it is showing two divs with id = 200.
here check this fiddle http://jsfiddle.net/vDBDA/2/
now there are two queries
1. I use duplicate id to show similar type of divs on selection of radio button like this code
<div id="200" class="imgDisp">
though it is working fine but I know duplicate id's is a problem. how can I fix it?
when the page loads number 200 is checked by default.. and here in this fiddle it is displaying the divs associated with radio button 200 but in actual programming and in localhost/browser it does not show.. What could be the reason?
All your help will be golden. thanks guys in advance
ID should be unique
if you want to apply some effects to some group of elements then have
all those elements in one class.
and for applying effect you need to specify using
$('.classname').fadein();
I have slightly edited your fiddly pls check
http://jsfiddle.net/vDBDA/7/
Simply add class and remove ID of DOM and then use .on() jQuery method that allow to bind events on dynamically loaded content.
You can use class instead of ID Because ID must be unique for one html page.
You can assign a class to each element that you want per grouping. You may need to then iterate over those elements using an each function.
$(selector).each( function(){
//hide or show...etc
});
Simply add this class in your css file
.hide_div{
display: none;
}
While hiding any div, apply this property to the div and if you want to show the div then user show_div as class. Use addClass for applying the CSS to that DIV.
.show_div{
display: block;
}
i try your code...and here is what i did...
<div class="wrapper"> <strong><span>*</span> Number</strong>
<div class="formText">
<input type="radio" name="rdNumber" value="100" />100
<input type="radio" name="rdNumber" value="200" checked="checked" />200
<input type="radio" name="rdNumber" value="300" />300</div>
</div>
<input type="radio" name="rdImage" value="preExisting" />Choose from images below
<div class="100 imgDisp" >
<div class="heading">10x10</div>
<input type="radio" name="preExistingImage" class="100" value="10x10-1"
/>
<img src="1-1.png">
<input type="radio" name="preExistingImage" class="100" value="10x10-2" />
<img src="1-2.png">
</div>
<div class="200 imgDisp">
<div class="heading">10x20</div>
<input type="radio" name="preExistingImage" class="200" value="10x20-1"
/>
<img src="2-1.png">
<input type="radio" name="preExistingImage" class="200" value="10x20-2" />
<img src="2-2.png">
</div>
<div class="200 imgDisp" >
<div class="heading">20x10</div>
<input type="radio" name="preExistingImage" class="200" value="20x10-1"
/>
<img src="3-1.png">
<input type="radio" name="preExistingImage" class="200" value="20x10-2" />
<img src="3-2.png" width="20" height="10">
</div>
$(document).ready(function () {
$(".imgDisp").hide();
$('.'+$(":radio:checked").val()).show();
$('input[name="rdNumber"]:radio').click(function () {
$("div.imgDisp").fadeOut('slow');
$('.'+$(this).val()).fadeIn('slow');
});
});

Multiple radio buttons to show/hide div

I have 4 radio buttons and I need to show a specific div based on which is clicked and make sure the other 3 remain hidden, etc for all 4. I can only find code to make 2 work but not 4.
Does anyone have an example how to do this?
Just as a test I have
<div id=onestyle=display:none> 1 </div>
<div id=two style=display:none> 2 </div>
<div id=three style=display:none> 3 </div>
<div id=four style=display:none> 4 </div>
but cannot find something to sort out doing it with all of them.
Buttons are just basic in place to test right now:
<div data-biller="standard" class="membership-plan ">
<label for="option_2624" id="tt-2624">
<input value="12" id="option_2624" name="signup[optionid]" type="radio" checked="checked">
<span class="duration" style="float:left; "><var class="" ref=""> 12<br></span></label>
</div>
<div data-biller="standard" class="membership-plan ">
<label for="option_2429" id="tt-2429">
<input value="6" id="option_2429" name="signup[optionid]" type="radio">
<span class="duration" style="float:left; "><var class="" ref=""> 6 <br></span></label>
</div>
<div data-biller="standard" class="membership-plan ">
<label for="option_1554" id="tt-1554">
<input value="3" id="option_1554" name="signup[optionid]" type="radio" >
<span class="duration" style="float:left; "><var class="" ref=""> 3 <br></span></label>
</div>
<div data-biller="standard" class="membership-plan ">
<label for="option_1697" id="tt-1697">
<input value="1" id="option_1697" name="signup[optionid]" type="radio">
<span class="duration" style="float:left; "><var class="" ref=""> 1<br></span></label>
</div>
You can do this by jQuery like the following
I added a custom attribute to the radio that is connected to the div and this will only show one div per click
HTML Code
<div class="my-div me_1" data-target="1">1</div>
<div class="my-div me_2" data-target="2">2</div>
<div class="my-div me_3" data-target="3">3</div>
<div class="my-div me_4" data-target="4">4</div>
<div class="my-div me_5" data-target="5">5</div>
<input type="radio" data-target-id="1" name="radio" class="radioBtn">
<input type="radio" data-target-id="2" name="radio" class="radioBtn">
<input type="radio" data-target-id="3" name="radio" class="radioBtn">
<input type="radio" data-target-id="4" name="radio" class="radioBtn">
<input type="radio" data-target-id="5" name="radio" class="radioBtn">
JS Code
$(document).ready(function(){
$('.radioBtn').click(function(){
var target = $(this).data('target-id');
$('.my-div').hide();
$('.my-div[data-target="'+target+'"]').show();
});
});
And here is a working example
http://jsfiddle.net/JU7Nw/70
Here's a sample code that does what you want. I am not using any javascript library but plain old javascript.
<html>
<head>
<script type="text/javascript">
function showDiv (divId)
{
var div = document.getElementById (divId);
var divs = document.getElementsByTagName('div');
for (var i in divs)
{
divs [i].className = "hidden";
}
div.className = "shown";
}
</script>
<style>
.hidden
{
display:none;
}
.shown
{
display:block;
}
</style>
</head>
<body>
<input type="radio" onclick="showDiv ('1')" name="selectme">1</input>
<input type="radio" onclick="showDiv ('2')" name="selectme">2</input>
<input type="radio" onclick="showDiv ('3')" name="selectme">3</input>
<input type="radio" onclick="showDiv ('4')" name="selectme">4</input>
<div id="1" class="hidden">Hey, its me, 1</div>
<div id="2" class="hidden">Hey, its me, 2</div>
<div id="3" class="hidden">Hey, its me, 3</div>
<div id="4" class="hidden">Hey, its me, 4</div>
</body>
</html>

Categories

Resources