Develop Reference

Storing multiple sets of radio button values into object angularjs (without jQuery)

In this slimmed down version of my controller and view, I am attempting to store the user selection of multiple sets of radio buttons, grouped in threes, within an object. I then will send the object within ajax call in order to store via SQL database. I have succeeded in doing this, however I had to use jQuery to do so. Any ideas on ways to do this within the angularjs framework, hence avoiding the jQuery usage? In case you’re wondering, the radio buttons represent present and absent, in order to keep attendance for a large list of students. Thank you!
<tr ng-repeat="s in rollCallList">
<td align="left">{{s.Last_Name}}, {{s.First_Name}}</td>
<td>
<input name="{{s.dc_number}}" id="id1{{s.dc_number}}" type="radio" value="P" ng-checked="radiocheck" />P
<input name="{{s.dc_number}}" id="id2{{s.dc_number}}" type="radio" value="A" />A
<input name="{{s.dc_number}}" id="id3{{s.dc_number}}" type="radio" value="X" />X
</td>
</tr>
<tr>
<td colspan="2">
<button class="btn" ng-show="SaveAttBtn" ng-click="SaveAtt(RollCallDate)">Save Attendance</button>
<button class="btn" ng-show="DeleteAttBtn" ng-click="DeleteAtt(RollCallDate)">Delete Attendance</button>
</td>
</tr>
$scope.SaveAtt = function (dt) {
$scope.rollCallList.forEach(function (obj) {
var dc = obj.dc_number;
var attVal = $('input[name=' + dc + ']:checked').val();
obj.status = attVal;
obj.classDate = dt;
console.log(obj);
});
}

<input name="dcNumber_{{s.dc_number}}" type="radio" ng-model="s.status" ng-value="'P'" />P
<input name="dcNumber_{{s.dc_number}}" type="radio" ng-model="s.status" ng-value="'A'" />A
<input name="dcNumber_{{s.dc_number}}" type="radio" ng-model="s.status" ng-value="'X'" />X
When looping through your items, s.status will have the selected ng-value. As for ng-checked, you should set the s.status to equal to the value you want to be auto selected. (P,A,X)

group all radio buttons with different names

I am trying to find a way to validate all of my radio buttons to make sure atleast one of them is checked. The problem is doing it with the names and id's have to remain in the format that they are in.
So basically I want to have a way to group all of my radio buttons even with different names and id's.
I understad how to loop for all checked buttons in the table but some are outside of the table, the code is just an example of what I need to do.
<table id="table" width="100%" border="0" cellpadding="5">
<tr>
<td><input type="radio" name="blue" id="blue" value="blue1" /></td>
<td><input type="radio" name="blue" id="blue" value="blue2" /></td>
<td><input type="radio" name="red" id="red" value="red1" /></td>
<td><input type="radio" name="red" id="red" value="red2" /></td>
<td><input type="radio" name="blue" id="green" value="green1" /></td>
<td><input type="radio" name="green" id="green" value="green2" /></td>
</tr>
</table>

Something like this:
if($('input[type="radio"]:checked').length > 0){
//at least one radio on your page is checked
}

Assuming you are going for the HTML5 validation, just make one of them required, and then change it as they go:
<input required type="radio" name="blue" id="blue" value="blue1" />
JS:
$radios = $('input[type="radio"]');
$radios.on('change', function() {
if ($(this).is(':checked')) {
$radios.prop('required', false);
$(this).prop('required', true);
}
});
$('form').on('submit', function(e) {
if ($('input[type="radio"]:checked').length === 0) {
e.preventDefault();
alert("Must check at least one radio");
return false;
}
});

Given your posted html I'd suggest changing the name of all those posted <input /> elements to colour (or color, according to language preference) to clearly associate them together.
However, if that can't be done, and you're able to add a class-name as a means of associating the group:
var allInputs = $('input.colour'),
checked = allInputs.filter(':checked'),
choiceMade = checked.length > 0;
Incidentally:
…I think by adding the class if I checked one, it would check the rest in that class.
No, that behaviour - unchecking one element should another be checked - is entirely dependent on the <input /> sharing a name attribute and being semantically grouped. It doesn't matter how else you create an association, so long as you don't yourself create that functionality.

To make sure at least one radio button within table is checked and the one at the top of the page:
if ($('#top-radio').is(':checked') && $('#table :radio:checked').length) {
// valid, something is checked
}

how to toggle multiple inputs within a table depending on radio button selection

Assume the following html:
<tr>
<td>
<label for="c1_testRdio">Have you taken any tests in this class?:</label>
<br>
<label>Yes<input type="radio" class="testRdio" name="c1_testRdio" value="Yes"></label>
<label>No <input type="radio" class="testRdio" name="c1_testRdio" value="No" checked></label>
<label>How Many? <input type="text" class="howManyTests" name="c1_howManyTests" disabled></label>
</td>
<td>
<label for="c1_whatGradesTests">What were your grades?:</label><br>
<input type="text" name="c1_whatGradesTests" disabled>
</td>
</tr>
if radio with value="Yes" is selected, what jQuery (1.5 compatible ) code would enable the 2 text inputs, c1_howManyTests and c1_whatGradesTests?
Have tried:
$('.testRdio').change(function(){
//var txt = $(this).closest("td").next("td").children('.howManyTests');
var txt = $(this).parent().next('label>input[type="text"]');
console.log(txt.id);
this.value == 'No' ? txt.removeAttr('disabled') : txt.attr('disabled', 'disabled');
});

Try this:
$('.testRdio').change(function () {
$(this).closest('tr').find('input[type="text"]').attr('disabled', this.value === 'No');
});
The older jq version that doesnot have prop, attr (used to do the job of prop as well) used to take bool values for disabled.
Demo
Also i had to fix your markup a lot as well (Now i see its fixed in the question already)

$('.testRdio').change(function(){
$(this).closest('tr').find('input[type="text"]').attr('disabled',$(this).val()=="No");
});
jsFiddle example

Your code was a little messy, so I rebuilt it: http://jsfiddle.net/QgJac/1/
I think hiding the whole div is better. They don't really need to see those questions if they select 'No'.

showing a div after selecting a radio button

I have this code and what I need to with this is when selecting one radio button I want to display subscription_rate div. At the moment both main DIVs display together. I need to keeping hide subcription_rate div when click on a radio button.
hope someone help me out this..
this is my code so far...
<div class="form-element-row">
<div class="first-child">
<label for="name">Registration Period<img alt="required" src="images/required_star.png" />:</label>
</div>
<div class="last-child">
<input type="radio" name="period" value="1" />1 Year
<input type="radio" name="period" value="2" />2 Years
<input type="radio" name="period" value="3" />3 Year
</div>
</div>
<div class="subscription_rate">
<div class="first-child">
<label> </label>
</div>
<div class="last-child">
<table>
<tr>
<th>Subscription Rate</th>
<th>1 Year</th>
<th>2 Years</th>
<th>3 Years</th>
</tr>
<tr>
<td style="text-align: left;">Lanka Institute Rates for Tutors within their subscription period.</td>
<td width="18%">Rs.3000</td>
<td width="18%">Rs.4500<br /><span>Save 25%</span></td>
<td width="18%">Rs.7500<br /><span>Save 50%</span></td>
</tr>
</table>
</div>
</div>

You need to bind change event handler with radio button and use show() / hide() functions.
Live Demo
$('.subscription_rate').hide();
$('[name=period]').change(function(){
$('.subscription_rate').show();
});
To toogle between change of radion buttons, you can use toogle()
Live Demo
$('.subscription_rate').hide();
$('[name=period]').change(function(){
$('.subscription_rate').toggle();
});

First hide the div in the css:
display:none;
then use this script:
$('input[name="period"]').change(function(){
$('.subscription_rate').slideDown('slow'); // .slideDown(800);
});

First hide it by using .hide() in jquery and use .show() when you want to display it after the user clicks the radio button,
$(document).ready(function(){
$('.subscription_rate').hide(); // hide the div first
$('input[type=radio]').change(function(){
if($('input[type=radio]:checked').val()==1){ //check which radio button is clicked, here its 1
$('.subscription_rate').hide();
}else if($('input[type=radio]:checked').val()==2){
$('.subscription_rate').fadeIn("slow"); // show the div with fadeIn
}else if($('input[type=radio]:checked').val()==3){
$('.subscription_rate').hide();
}else{
$('.subscription_rate').hide(); // if in any case radio button is not checked by user hide the div
}
});
});
JSFIddle demo

JQuery Selectors (finding cell in a table that's in a td)

I have an HTML table
<table id="sometable">
<tr>
<td>
<table class="wTable">
<tr>
<td>
<input type="radio" name="rdGroup" val="0" />
</td>
<td>
<input type="radio" name="rdGroup" val="5" />
</td>
<td>
<input type="radio" name="rdGroup" val="10" />
</td>
</tr>
</table>
</td>
</tr>
</table>
The reason for the table within a TD is for the purpose of skinning and positioning. I'm not great when it comes to JQuery and was wondering if there was a selector technique to get access to that radio button when that cell is clicked.
For example, previously my code was set as (before skinning):
<table>
<tr>header stuff</tr>
<tr>
<td>data</td>
<td>data 2</td>
<td><input type="radio" name="rdGroup" value="0"> No Warranty </br>
<input type="radio" name="rdGroup" value="5"> 1 year Warranty </br>
<input type="radio" name="rdGroup" value="10"> 2 year Warranty </br>
</td>
<td>data 3</td>
</tr>
<tr>footer stuff</tr>
</table>
Above is the original basic table structure.
$("#dnn_ctr391_Account_ctl00_ctl01_grdItems tr:first,#dnn_ctr391_Account_ctl00_ctl01_grdItems tr:last").addClass("info");
The above added a class named info to the header and footer of the table (i didn't care for any of the data in them)
From there I created a td click function to process data:
$("#dnn_ctr391_Account_ctl00_ctl01_grdItems tr:not(.info) td:nth-child(7)").click(function() { //DO CODE HERE });
And within that click function I was able to access data from the other cells I needed:
var warval = 0;
warval = $(this).closest("tr").find("input[type=radio]:checked").val();
Is there a way for me to get access using the same style of coding to get access to when that cell is clicked to get the radio button value, and then leave that table to go back to the TD it is in, and then get access to the other td's using the $(this).closest("tr").find() method?
Thanks for any help you can provide.

I think you're looking for something like this:
$('table#sometable table.wTable td').click(function () {
var isChecked = $(this).children('input[type=radio]').val();
//To get 'back to the tr'
var $warval = $(this).closest("tr");
});

Ok, from what you said in the comments, I hope this is helpful:
First of all, I would advise changing the table markup to divs. This is not mandatory, but it will lead to cleaner and more manageable code. Something like this maybe:
<p>data 1</p>
<p>data 2</p>
<div>
<input type="radio" name="rdGroup" id="rdGroup_0" value="0" />
<label for="rdGroup_0">No Warranty</label>
</div>
<div>
<input type="radio" name="rdGroup" id="rdGroup_5" value="5" />
<label for="rdGroup_5">1 year Warranty</label>
</div>
<div>
<input type="radio" name="rdGroup" id="rdGroup_10" value="10" />
<label for="rdGroup_10">2 year Warranty</label>
</div>
<p>data 3</p>
<div class="footer">Footer</div>
Your jQuery hook could be as simple as this:
$(function() {
$('input[type=radio]').change(function() {
// do whatever needs to be done here when the radio button value changes
console.log("value '"+this.value+"' was selected for the warranty option");
});
});​
If you need to set the corresponding value when loading the form with the data stored in your DB, you could do it with this function (if you've set your radio box IDs as shown above):
var setWarrantyOption = function(value) {
$('#rdGroup_' + value).click();
};
You can fiddle around with the code here: http://jsfiddle.net/gruese/fsj2v/
Please tell me if that helps or if I've maybe misunderstood your problem.