We Keep Coding

Targeting the nth element of certain class when nth checkbox is checked?

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/

setting radio button checked under multiple tabs

i have few tabs and each tab has same radio button groups like this
see case#1 has radio buttons name="managerid" and with class="managerid
<label>
<input type="radio" name="managerid" class="managerid managerid_8" data-radio="iradio_square-grey" value="8">
Spam Dead
</label>
<label>
<input type="radio" name="managerid" class="managerid managerid_9" data-radio="iradio_square-grey" value="9">
Stewart Stephenson
</label>
these are dynamically generated tabs and radio buttons
now i want to set radio button checked in each tabs with the value
this is how im doing
$.each($("#tab_"+r.id).find(".managerid"),function(i,v){
if(v.value === r.managerid){
v.checked = true;
}
});
i know the id of the tab so i find() the managerid and set them checked if the value matches
the problem is that it sets radio checked on the last tab only
how do i set radios checked on each tab with different values

I would suggest you to assign different style class to radio button controls and that is a better possible way to select/deselect across multiple tabs

Validation passes of unchecked radio buttons

I'm trying to validate radio buttons but the valuation does not work, the next page gets loaded even if no radio button is checked. I have tried different approaches but none of them work, at one point I had pop-up window appearing, as for other messages, but next page was loaded anyway.
Here is my code:
HTML:
<fieldset id="Radio">
Smoking <input type="radio" name="smoking" id="smoking1" value="Smoking">
Non-smoking <input type="radio" name="smoking" id="smoking2" value="Non-smoking">
</fieldset>
JavaScript:
var radio1 = document.getElementById("smoking1");
var radio2 = document.getElementById("smoking2");
if ((!radio1.checked) && (!radio2.checked)){
window.alert("You must check one of the options in Smoking Preferences field!");
reservation.radio1.focus();
return false;
}
I would appreciate any suggestions! Thanks!

reservation.radio1.focus();
There is no element with the name radio1 in your code sample.
add name="radio1" to both your radio buttons.
Now the focus will not work since name will return two so you need to select the first one.
reservation.radio1[0].focus();

How to have jquery tooltip hover on all my radio buttons

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/

Button with radio button functionality

I am wondering whether you can make a button, function like a HTML Radio button. I am trying to create a form where the user clicks on the said button and a value is thus selected, but the user is not directed until selecting another option and submitting the form. Does anyone know how to go about doing this?
(I don't mind the use of other languages including javascript etc.)

jQueryUI has a Button Widget that converts radio buttons or checkboxes into buttons.
Example from the site:
http://jqueryui.com/demos/button/#radio
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
<div class="demo">
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</form>
</div>
You can visit the link to see it in action.

First, on the page you're talking about, it sounds as if the user is taken somewhere else -- i.e., a submit-like action is taken -- merely by his selecting a radio button. I don't believe that this is the very best practice.
Second, you should imo keep the two radio buttons: they work great and, once selected, a radio button can't be cleared except by selecting another button. This is just what you want.
To be sure that the two buttons you require have been selected, give each button an onclick handler that sets a switch: some button in this group was selected.
Then, when he clicks submit, check those two switches and tell him if he forgot to click a button.
Yes, you need JavaScript to do all this.