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');
});
});
Related
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>
I have multiple radio buttons. In the code that i have they are different pictures corresponding with different functions.
The user has to know which radio button is clicked. Therefor i'm trying to find a way to change the background of the radio button after it has been clicked.
In order for the code to work the <label> has to stay arround the <input> tag.
<div class="radio-toolbar">
<label class="BottomLeft">
<input id="tech" type="radio" ng-model="SelectedLayout" value="BottomLeft" />
</label>
<label class="BottomRight">
<input id="tech" type="radio" ng-model="SelectedLayout" value="BottomRight" />
</label>
<label class="Dual">
<input id="tech" type="radio" ng-model="SelectedLayout" value="Dual" />
</label>
<label class="DualRight">
<input id="tech" type="radio" ng-model="SelectedLayout" value="DualRight" />
</label>
<label class="Duplex">
<input id="tech" type="radio" ng-model="SelectedLayout" value="Duplex" />
</label>
<label class="Custom">
<input id="tech" type="radio" ng-model="SelectedLayout" value="Custom" />
</label>
</div>
Here's the JSfiddle
You can try this:
$('input[type=radio]')
.on('click', function() {
var $label = $(this).closest('label');
$('label').not($label).css('background-color', 'green');
$label.css('background-color', '#2C8BDE');
});
Here is the FIDDLE.
Also, you must have unique ID's in html.
To work your labels , your code should look like this.The problem is that , you cannot have same ID for all elements. ID is unique and if you want to work with label , you have to put for="#" attribute in your <label></label> element.So , remember <label></label> goes with for="" attribute , and that for="" attribute works with the id in the <input /> tag.And I've made your radio buttons non-multiple , so remove name="" attribute to work as multiple.
<div class="radio-toolbar">
<label for="first">
Tech<input id="first" type="radio" ng-model="SelectedLayout" name="radioButton" value="BottomLeft" />
</label>
<label for="second">
AnotherOne<input id="second" type="radio" ng-model="SelectedLayout" name="radioButton" value="BottomRight" />
</label>
<label for="third">
Third<input id="third" type="radio" ng-model="SelectedLayout" name="radioButton" value="Dual" />
</label>
<label for="fourth">
Fourth<input id="fourth" type="radio" ng-model="SelectedLayout" name="radioButton" value="DualRight" />
</label>
<label for="fifth">
Fifth<input id="fifth" type="radio" ng-model="SelectedLayout" name="radioButton" value="Duplex" />
</label>
<label for="sixth">
Sixth<input id="sixth" type="radio" ng-model="SelectedLayout" name="radioButton" value="Custom" />
</label>
</div>
Try this.I have changed backgorund color checked radio button to orange with jquery
$('input[type=radio]')
.on('click', function() {
var $label = $(this).closest('label');
$('label').not($label).css('background-color', 'green');
$label.css('background-color', '#2C8BDE');
});
Here is an example : http://jsfiddle.net/c8uywnpa/21/ which works on other browsers but IE (10).
The issue comes when a the buttonset is wrapped within a 'form' element. Please see example included.
<b> Form - Click on image does not work, must click on number </b>
<form>
<div id="myRadio">
<input id="rf1" type="radio" name="myRadio" value="1" />
<label for="rf1">1 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
<input id="rf2" type="radio" name="myRadio" value="2" />
<label for="rf2">2 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
</div>
</form>
<hr>
<h3> No Form - Click on image works </h3>
<div id="myRadioNoForm">
<input id="r1" type="radio" name="myRadioNoForm" value="1" />
<label for="r1">1 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
<input id="r2" type="radio" name="myRadioNoForm" value="2" />
<label for="r2">2 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
</div>
$("#myRadio").buttonset().on('change', function(event) {
alert($(this).find(":checked").val());
});
$("#myRadioNoForm").buttonset().on('change', function(event) {
alert($(this).find(":checked").val());
});
Clicking on the numbers in the label fires the change event but does not if you click on the Image in the label. Any help is much appreciated.
I had the same problem. I'm not using jQuery. I had the image wrapped with the span, so I tried to add an :after pseudoelement to it. It covers the image, so when clicking, you click on the pseudoelement rather than on the image. And it helped for me. ie9-11
.image { position: relative; display: block;}
.image:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%;}
<label for="answ">
<span class="image"><img src="image.jpg"></span>
</label>
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>
I'm using a single search option field for searching in different ways by clicking the radio buttons given on that page. For example search by search-client-by-id, search-client-by-name, search-client-by-emailid etc. and I want to put different jQuery validations on it on the same search field by clicking on different radio buttons.
The validations used for this purpose are like this demo:
http://www.position-relative.net/creation/formValidator/demos/demoValidators.html
<div class="search-job-txtbox" >
<input type="text" name="clientSearchText" id="clientSearchText" value="" class="search-txtbox" onkeyup="javascript:searchByCriteria(this.value,'radio');"/>
<div class="search-icon"><a href="javascript:;"><img src="<%=request.getContextPath()%>/images/search-icon.gif" width="25" alt="Search" title="Search" height="25" /></div>
</div>
<div class="job-options">
<div class="job-checkbox"><input type="radio" name="radio" id="radio" value="search-client-by-id" checked="true" onclick="javascript:searchByCriteria();"/></div>
<h5>ID</h5>
<div class="job-checkbox"><input type="radio" name="radio" id="radio" value="search-client-by-name" /></div>
<h5>Name</h5>
<div class="job-checkbox"><input type="radio" name="radio" id="radio" value="search-client-by-emailid" /></div>
<h5>Email</h5>
<div class="job-checkbox"><input type="radio" name="radio" id="radio" value="search-client-by-contact-number" /></div>
<h5>Contact</h5>
</div>
You can trigger the validation dynamically
$('input.clientID').click(function() {
$('#form').validationEngine(options);
});
Do that for each type, or implement a case/switch