So I have a dynamically listed set of elements, each structured as follows:
<div class="under-item-description">
<span class="under-compare-price">100</span><span class="under-price">50</span>
<span class="under-compare-price-2">200</span><span class="under-price-2">100</span>
<div class="under-quantity">
<label class="under-quantity-button">
<input type="radio" checked="checked" name="quantity-1" class="under-quantity-radio" value="1"/>
</label>
<label class="under-quantity-button">
<input type="radio" name="quantity-2" class="under-quantity-radio" value="2"/>
</label>
</div>
</div>
The amount of times the .under-item-description div is shown on the page can change. Currently, it shows four times.
What I am trying to do is when a user clicks on the first checkbox (name="quantity-1") in any given .under-item-description div, that div's .under-compare-price and .under-price shows, while .under-compare-price-2 and .under-price-2 are hidden.
If the second checkbox (name="quantity-2") is clicked, then .under-compare-price-2 and .under-price-2 are shown while .under-compare-price and .under-price are hidden, only in that .under-item-description div.
Here's my JS:
$('.under-quantity-button').click(function(){
$('.under-quantity-radio').each(function(){
if($(this).is(':checked')){
$('.under-compare-price:eq('+$(this).parents('.under-item-description').index()+'), .under-price:eq('+$(this).parents('.under-item-description').index()+')').show();
$('.under-compare-price-2:eq('+$(this).parents('.under-item-description').index()+'), .under-price-2:eq('+$(this).parents('.under-item-description').index()+')').show();
}
});
});
However, it doesn't seem to function as I want. Regardless of which second checkbox is clicked, I have the prices appear on the 1st and 3rd elements. And it doesn't switch back when the first checkbox is clicked anywhere. Any help?
Surround each selection of radio buttons in a
<fieldset></fieldset>
This will allow them to work independently, then use jQuery closest() to select the elements to hide.
https://api.jquery.com/closest/
Related
I'm trying to learn how to use jquery to show/hide elements dependent on values. i'm not sure if .show / .hide is the right choice so any help will be appreciated...
Here is my example on jsfiddle where I have 2 radio buttons and 2 divs.
I want Jquery to show a single div by the dependency of the checked radio button, so it will show only the one that is checked.
HTML:
<input type="radio" name="one" value="01" checked> Male<br>
<input type="radio" name="two" value="02"> Female<br>
<div class="showhide">
show me when 01 is checked.
</div>
<div class="showhide">
show me when 02 is checked.
</div>
JQuery (trying to understand what to do here):
$("div.showhide").hide();
$("div.showhide").show();
// or maybe with:
$("div.showthis").toggle(this.checked);
Using data-* attributes comes in handy in such practices. Rember that the radios name attributes must be the same that one and only one checkbox can be checked at any given time. And, there is no p tag in your code, at least in the example provided, so why bother prefixing the selector with it?
The following example makes use of data-section attribute which has the selector for the element that must be shown when the checkbox is checked. It is worth mentioning that this is code is dynamic and does not require changing the code when adding more inputs with divs.
$(function() {
// listen for changes
$('input[type="radio"]').on('change', function(){
// get checked one
var $target = $('input[type="radio"]:checked');
// hide all divs with .showhide class
$(".showhide").hide();
// show div that corresponds to selected radio.
$( $target.attr('data-section') ).show();
// trigger the change on page load
}).trigger('change');
});
.showhide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="radio" name="one" data-section="#div-1" value="01" checked>Male<br>
<input type="radio" name="one" data-section="#div-2" value="02">Female<br>
<div id="div-1" class="showhide">
show me when 01 is checked.
</div>
<div id="div-2" class="showhide">
show me when 02 is checked.
</div>
I'm using the following code to allow for an accordion effect on a series of table rows.
$('.accordian-body').on('show.bs.collapse', function () {
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
});
Inside the collapsed rows I also have a series of checkboxes, to allow for options to be selected:
<div style="float:right;margin-top:-5px;" class="checkbox check-primary checkbox-circle">
<input id="checkbox1" type="checkbox" checked="checked" value="1">
<label for="checkbox1"></label>
</div>
These checkboxes cannot be checked or unchecked, even if not disabled, although the mouse pointer will chance to indicate a clickable element is there.
How can I re-enable the checkboxes?
Thanks!
I have a form in which I have a button at the top. If I click that button, then it shows four radio buttons at the bottom.. And now I am planning to have jquery tool tip hover on all my Radio Buttons.
Here is my jsfiddle.
If I am moving my mouse on TEST1 radio button, I would like to show Hello Test1
If I am moving my mouse on TEST2 radio button, I would like to show Hello Test2
If I am moving my mouse on TEST3 radio button, I would like to show Hello Test3
If I am moving my mouse on TEST4 radio button, I would like to show Hello Test4
Is this possible to do? I saw this example but they have radio button in div somehow so not sure how would this work in my situation.
Can anyone provide jsfiddle example?
NOTE:-
Hello Test1 is just an example, it can be any word or paragraph of two three lines.. When I will be integrating the code, I will use different words for all my radio buttons..
here is attach demo link please see it :
http://jsfiddle.net/4Nmqk/32/
add this to your js
$('label').tooltip({
placement : 'top'
});
you html is like this
<label title='hello test1'><input type="radio" name="data" id="data" value="test1">TEST1 </label>
<label title='hello test2'><input type="radio" name="data" id="data" value="test2">TEST2 </label>
<label title='hello test3'><input type="radio" name="data" id="data" value="test3">TEST3 </label>
<label title='hello test4'><input type="radio" name="data" id="data" value="test4">TEST4 </label>
you want any other name to each input you can change title of label tag as your choice.
you also use id=data for all four input this is not valid html you can use id's same value only one time for page so give different id value for all four input or you can use class instead of id.
You can iterate the radio buttons and set title for it
$("input[type*=radio]").each(function(i,value){
$(this).attr("title","Hello "+$(this).val());
});
http://jsfiddle.net/4Nmqk/30/
I'm setting up a table, where each row will contain several radio boxes. There are certain conditions for the radio boxes, for example:
If "Home" is checked, the "Text" radio box will be unchecked and "Voice" will be checked instead (ie. You can't text a home phone number). Similarly, when "Home" and "Voice" are checked, clicking "Text" will force "Home" to be unchecked and "Cell" will become checked.
I can get this working fine for one instance, with the use of .getElementById and the click function, but where I run into trouble is when things are scaled up. This table might have 20 or 30 rows, each of which containing a cell with these radio boxes.
I'm not great with jQuery, so I'm not sure how to make a more general version, so that each set of radio boxes are their own contained units, so to speak. I made a jsfiddle where you can see that only the first instance is working, likely because I am targeting the boxes using their id and you can't have two elements with the same id... help? Thanks!
http://jsfiddle.net/3uHqS/
Script
$( document ).ready(function() {
document.getElementById('contact-home').onclick = function () {
document.getElementById('format-voice').checked = true;
};
document.getElementById('format-text').onclick = function () {
document.getElementById('contact-cell').checked = true;
};
});
HTML
<form>
<input type="radio" name="contact" value="" id="contact-cell" />
<label for="contact-cell">Cell</label>
<input type="radio" name="contact" value="" id="contact-home" />
<label for="contact-home">Home</label>
<input type="radio" name="format" value="" id="format-voice" />
<label for="format-voice">Voice</label>
<input type="radio" name="format" value="" id="format-text" />
<label for="format-text">Text</label>
</form>
You are going to want to assign every radio box a descriptive class like 'text-radio' or 'home-radio'. Then when you need to change all of the Text radio boxes you do something like the following in jQuery:
$(".text-radio").attr('checked', 'checked');
How to find the radio button Value in inner div while clicking on radio button
Hi i have a radio button i want to
find out the value of the radio button when clicking on that radio button in jQuery:
Please see here my problem http://jsfiddle.net/c857P/232/
jsFiddle Demo
You're missing the class="vvradiobtn" for your radio buttons
<input type="radio" name="VVradio" class="vvradiobtn" id="radio1" value="1">
<input type="radio" class="vvradiobtn" name="VVradio" id="radio2" value="2">
I see a few duplicate IDs in your DOM. I suggest to use unique IDs for your html elements.