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/

ng-change not firing after click on each radio button in a list

I am creating a small application for my college project, I have a scenario where when the user clicks on a radio button an event should be fired.
My Angular code block:
<div ng-repeat="q in questionList " ng-if="ExamOver == false">
<h2>{{count+1}} .{{q.questionText}}</h2>
<ul>
<li ng-repeat="d in q.Choices">
<input type="radio" name="isCorrect" ng-model="correctAnswer.isworking" ng-change="getDetails($index,d,correctAnswer.isCorrect);" value="Yes" />
{{d.choiceText}}
</li>
</ul>
</div>
In my controller, I have this code:
$scope.correctAnswer = {isCorrect : false};
$scope.getDetails = function (index, choiceList, isCorrect) {
/* some logic... */
}
The events are firing only once per button, I am trying to work around this for past few hours without any progress, can someone please guide me what I am doing wrong here?

ng-change will be fired when the value of the variable you binded (with ng-model) changed. Here, all your radio buttons have the same value="Yes". That's is why ng-change is not triggered. From docs:
Evaluate the given expression when the user changes the input. The
expression is evaluated immediately, unlike the JavaScript onchange
event which only triggers at the end of a change (usually, when the
user leaves the form element or presses the return key).
The good solution depends of your needs, but where are some ideas:
Solution 1
Set different values for your inputs:
<li ng-repeat="d in q.Choices">
<input type="radio"
name="isCorrect"
ng-model="correctAnswer.isworking"
ng-change="getDetails($index, d, correctAnswer.isCorrect)"
ng-value="$index" />
{{d.choiceText}}
</li>
Solution 2
Fire your function whenever a radio is clicked:
ng-click="getDetails($index, d, correctAnswer.isCorrect)"

ngChange gets triggered if the value of ngModel changes.
Your radio buttons all have the same value namely "Yes"
<input type="radio" name="isCorrect" ng-model="..." ng-change="..." value="Yes" >

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

JavaScript - Select radio button if any checkbox is checked

I'm trying to write JavaScript code where a radio button should be populated if a checkbox is checked.
Following is the HTML code:
<form>
<h3>Radio Buttons</h3>
<input type="radio" name="radio1" id="radio1"> Radio 1
<br>
<input type="radio" name="radio2" id="radio2">Radio 2
<br>
<br>
<h3>Checkbox Groups</h3>
<h4><u>Group 1</u></h4>
<p align="center"><u>PD</u></p>
<ul>
<li>
<input id="pdcb" type="checkbox" name="G1PD1" onclick="validate()">G1 PD1</li>
<li>
<input id="pdcb" type="checkbox" name="G1PD2" onclick="validate()">G1 PD2</li>
</ul>
<p align="center"><u>ID</u></p>
<ul>
<li>
<input id="idcb" type="checkbox" name="G1ID1" onclick="validate()">G1 ID1</li>
<li>
<input id="idcb" type="checkbox" name="G1ID2" onclick="validate()">G1 ID2</li>
</ul>
<h4><u>Group 2</u></h4>
<p align="center"><u>PD</u></p>
<ul>
<li>
<input id="pdcb" type="checkbox" name="G2PD1" onclick="validate()">G2 PD1</li>
<li>
<input id="pdcb" type="checkbox" name="G2PD2" onclick="validate()">G2 PD2</li>
</ul>
<p align="center"><u>ID</u></p>
<ul>
<li>
<input id="idcb" type="checkbox" name="G2ID1" onclick="validate()">G2 ID1</li>
<li>
<input id="idcb" type="checkbox" name="G2ID2" onclick="validate()">G2 ID2</li>
</ul>
</form>
So here's what I want the JavaScript to do: If any of the PD checkboxes are selected, then the radio button Radio 1 should get selected. If none of the PD checkboxes are selected, then the radio button Radio 2 should get selected. Similarly, if none of the checkboxes are selected, then NONE of the radio buttons should get selected.
So far, I've written the following JS code:
function validate()
{
if(document.getElementById("pdcb").checked) //if pdcb checkbox(es) is/are checked
{
document.getElementById("radio1").checked = true;
document.getElementById("radio2").checked = false;
}
else if (!document.getElementById("pdcb").checked) //if none of the pdcb checkbox(es) is/are checked
{
document.getElementById("radio1").checked = false;
document.getElementById("radio2").checked = true;
}
else //if no checkbox is checked, then don't populate any radio button
{
document.getElementById("radio1").checked = false;
document.getElementById("radio2").checked = false;
}
}
PS: I need the code to be in pure JavaScript. I can't use jQuery.
Edit
I apologize for getting my requirements wrong. But here's the correct requirement. If any of the PD checkboxes are selected, then the radio button Radio 1 should get selected. If none of the PD checkboxes are selected, then the radio button Radio 2 should get selected. Similarly, if none of the checkboxes are selected, then NONE of the radio buttons should get selected.

I want to first point out that if you were testing this in a JSFiddle, the LOAD TYPE needs to be set to "No Wrap-in " for your inline onclick events to work.
Now, to your code. Document elements can either be tied to a class or ID. Classes are for when you're using elements that share the same functionality, styling, etc.; ID's are for unique elements and unique elements only. For example, in your JavaScript, when you try to test for checked pdcb elements with
document.getElementById("pdcb").checked
JavaScript simply grabs the first element on the page with the ID of pdcb. You have four elements with this ID name; this means that the last three pdcb elements are ignored and never evaluated.
Instead, let's utilize
document.getElementsByClassName("pdcb")
Note the plural form of the word 'Element'. What this does is it returns an array of all elements with the class name of pdcb. We'll get to the fact that we're dealing with an array in a few minutes. First, let's change most of your HTML ID's to classes.
<ul>
<li>
<input class="pdcb" type="checkbox" name="G1PD1" onclick="validate()">G1 PD1</li>
<li>
<input class="pdcb" type="checkbox" name="G1PD2" onclick="validate()">G1 PD2</li>
</ul>
You're going to want to do this for all of your pdcb and idcb elements. Feel free to preserve radio1 and radio2 as ID's because they're unique elements, not reused like pdcb and idcb are.
Now we can address the JavaScript; you're HTML is fine from here assuming you've made the changes necessary from above. Since we changed things from ID's to classes, expressions like the following simply won't do.
document.getElementById("pdcb")
Recall the solution that I wrote earlier:
document.getElementsByClassName("pdcb")
Also recall that I said that this will return an array of elements; in your case, four pdcb elements.
One option that you have at your disposal for tackling this problem is that you can iterate through the array of elements returned by document.getElementsByClassName("pdcb") to evaluate whether any pdcb class has been checked. It'll look something like this:
var pdcbClass = document.getElementsByClassName("pdcb");
//for each pdcb class on our HTML document
for (var i = 0; i < pdcbClass.length; i++) {
if (pdcbClass[i].checked == true) {
//the next two lines are straight from your JavaScript code
document.getElementById("radio1").checked = true;
document.getElementById("radio2").checked = false;
}
}
As you can imagine, we can use the exact same idea for the idcb class elements on your page. By the time we're done, we should have something like what you see below.
function validate()
{
var pdcbClass = document.getElementsByClassName("pdcb");
var idcbClass = document.getElementsByClassName("idcb");
console.log(this);
for (var i = 0; i < pdcbClass.length; i++) {
if (pdcbClass[i].checked == true) {
document.getElementById("radio1").checked = true;
document.getElementById("radio2").checked = false;
}
}
for (var i = 0; i < idcbClass.length; i++) {
if (idcbClass[i].checked == true) {
document.getElementById("radio1").checked = false;
document.getElementById("radio2").checked = true;
}
}
}
But there's a problem! No matter what check box fires off this validate() function, no check box is ever turned off. That means if we check a box with the pdcb class and then check a box with the idcb class, the pdcb box still stays checked; we never said to uncheck it. What this means is that even though it was an idcb click that triggered validate(), all of the code in the function gets executed. Either you have to have the user manually uncheck the previous box before checking a new one, or you need to write some code that does this same thing. Specifically, when a new check box is checked, you need to clear the previous box(es) of their checked property.
That is an entirely different problem and merits a different question. Also consider that this isn't the only way to write this event/functionality, but you're making good progress.
Here's essentially the code you need to keep on going.
https://jsfiddle.net/a4k9xggu/

Why are my Knockout Radio buttons failing when inside another element with a click binding?

I have a list of radio buttons. I want clicks on the <li> their in to also check the radio button. This all works up until I put a name attribute on the radio elements. Then my code stops working.
Here is what my code looks like:
<ul data-bind="foreach: rows">
<li data-bind="click: function() { $parent.val($data); }">
<input type="radio" name="my_radio" data-bind="value: $data, checked: $parent.val" />
<label data-bind="text: $data"></label>
</li>
</ul>
Here are two test cases.
Be sure to click on both the radio button and row.
Working: http://jsfiddle.net/Dihedral/HJGxX/2/
Not Working: http://jsfiddle.net/Dihedral/HJGxX/3/
In the second case and when clicking on just the radio, you'll see that the val() observable is being updated, but the UI is not. Anyone know what's going on here, or can see a workaround?

The click is not reaching the radio button because knockoutjs returns false from the click handler, preventing the default action to happen (see: note 3). Just return true from the click handler (http://jsfiddle.net/HJGxX/4/):
<li data-bind="click: function() { $parent.val($data); return true; }">

Having the name attributes all set to the same value makes all these radio buttons part of the same set, and you can only select one of them at once.
Read more about on radio buttons name attribute on www.W3.org