We Keep Coding

Radio box enabling input fields with JQuery

I'm trying to enable a textfield based on which option is chosen in a radio button. I'm just really new to any javascript or jquery, so I really need some help.
This is the TR from a table where the radio buttons and input fields are placed
<tr>
<td><b>Yes or no?</b></td>
<td><input id="yes" type="radio" name="choose" value="yes"> Yes</td>
</tr>
<tr>
<td></td>
<td><input id="no" type="radio" name="choose" value="no" checked> No</td>
</tr>
<tr>
<td>
<input type="text" name="disabledtextfield" id="test" disabled />
<script type="text/javascript">
$('#no').click(function () {
$('#test').removeAttr("disabled");
});
$('#yes').click(function () {
$('#test').attr("disabled", "disabled");
});
</script>
</td>
</tr>
The problem is probably really trivial, but again, I haven't worked with this at all. Any help would be appreciated!

You can do it like like following using change event instead of click.
$(':radio[name=choose]').change(function () {
var isChecked = $('#yes').is(':checked');
$('#test').prop("disabled", !isChecked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><b>Yes or no?</b></td>
<td><input id="yes" type="radio" name="choose" value="yes"> Yes</td>
</tr>
<tr>
<td></td>
<td><input id="no" type="radio" name="choose" value="no" checked> No</td>
</tr>
<tr>
<td>
<input type="text" name="disabledtextfield" id="test" disabled />
</td>
</tr>
</table>

Wrap your code in document ready function
<script type="text/javascript">
$(function(){
$('#no').click(function()
{
$('#test').removeAttr("disabled");
});
$('#yes').click(function()
{
$('#test').attr("disabled","disabled");
});
})
</script>
$('#no').click(function()
{
$('#test').removeAttr("disabled");
});
$('#yes').click(function()
{
$('#test').attr("disabled","disabled");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><b>Yes or no?</b></td>
<td><input id="yes" type="radio" name="choose" value="yes" checked> Yes</td>
</tr>
<tr>
<td></td>
<td><input id="no" type="radio" name="choose" value="no" > No</td>
</tr>
<tr>
<td>
<input type="text" name="disabledtextfield" id="test" disabled />
</td>
</tr>
</table>

How to chang multiple table rows using jQuery based upon a selection menu choice

If this question has already been asked please let me know where to find the answer
I am trying to create a form which, based on the selection made within a drop down menu, will display different table rows. I have been successful in accomplishing this when using JavaScript but I am now trying to migrate from JavaScript to jQuery and I am having difficulty figuring out the correct function to use.
Here is a JSFiddle file with the JavaScript coding in it
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
var dd = d.getDay();
var day1;
var day2;
var d_d = d.getMonth();
switch (d_d) {
case 0:
day2 = "January";
break;
case 1:
day2 = "February";
break;
case 2:
day2 = "March";
break;
case 3:
day2 = "April";
break;
case 4:
day2 = "May";
break;
case 5:
day2 = "June";
break;
case 6:
day2 = "July";
break;
case 7:
day2 = "August";
break;
case 8:
day2 = "September";
break;
case 9:
day2 = "October";
break;
case 10:
day2 = "Novmber";
break;
case 11:
day2 = "December";
break;
}
switch (dd) {
case 0:
day1 = "Sunday";
break;
case 1:
day1 = "Monday";
break;
case 2:
day1 = "Tuesday";
break;
case 3:
day1 = "Wednesday";
break;
case 4:
day1 = "Thursday";
break;
case 5:
day1 = "Friday";
break;
case 6:
day1 = "Saterday";
break;
}
document.getElementById("day").value = day1;
document.getElementById("time").value = d.toLocaleTimeString();
document.getElementById("date").value = day2 + " " + d.getDate();
}
function salad() {
var storenumber = document.getElementById("storenumber");
switch (storenumber.value) {
case "011169":
case "008181":
document.getElementById("frig1").classList.remove("hide");
document.getElementById("frig2").classList.remove("hide");
document.getElementById("frig3").classList.remove("hide");
document.getElementById("saladbar").classList.remove("hide");
document.getElementById("barcheese").classList.remove("hide");
break;
case "010576":
case "010324":
case "008615":
case "009150":
case "014640":
case "010684":
case "011168":
case "014215":
case "008179":
case "008339":
case "008668":
case "031574":
document.getElementById("frig1").classList.add("hide");
document.getElementById("frig2").classList.add("hide");
document.getElementById("frig3").classList.add("hide");
document.getElementById("saladbar").classList.add("hide");
document.getElementById("barcheese").classList.add("hide");
break;
}
}
header {
text-align: center;
}
td {
border: solid thin #000000;
background-color: #FF0000;
}
th {
border: solid thin #000000;
width: 300px;
background-color: #FF0000;
}
.required {
color: #FFF500;
}
.left {
text-align: right;
width: 500px;
}
.noborder {
border: none;
background-color: #061BFF;
color: #FFFFFF;
}
body {
background-color: #061BFF;
}
.nobordererror {
border: none;
background-color: #061BFF;
color: #FFFFFF;
}
.hide {
display: none;
}
<body>
<section>
<table cellspacing="0px">
<tr>
<th colspan="2" class="noborder">
<h1>Food Safety Checklist</h1>
</th>
</tr>
<tr>
<th colspan="2" class="noborder"><span class="required">*</span>=Required feilds</th>
</tr>
<!-- Identification Information section -->
<tr>
<td class="left"><span class="required">*</span>Store Number:</td>
<td>
<select id="storenumber" name="storenumber" required title="Please select your store ID number" onChange="salad()">
<option value="">Select Store Number</option>
<option value="010576">010576</option>
<option value="011169">011169</option>
<option value="008181">008181</option>
<option value="010324">010324</option>
<option value="008615">008615</option>
<option value="009150">009150</option>
<option value="014640">014640</option>
<option value="010684">010684</option>
<option value="011168">011168</option>
<option value="014215">014215</option>
<option value="008179">008179</option>
<option value="008339">008339</option>
<option value="008668">008668</option>
<option value="031574">031574</option>
</select>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Day:</td>
<td>
<input type="text" size="7" name="day" id="day" title="Enter current Day" required>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Date:</td>
<td>
<input type="text" size="9" name="date" id="date" required title="Please enter current date">
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Time:</td>
<td>
<input type="text" size="9" name="time" id="time" title="Enter current time" required>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Initials:</td>
<td>
<input name="initial" type="text" required id="initial" maxlength="2" size="3" title="Enter User ID">
</td>
</tr>
<tr>
<td colspan="2" class="noborder"> </td>
</tr>
<!-- Thermometer Calibration -->
<tr>
<th colspan="2" class="noborder">Thermometer</th>
</tr>
<tr>
<td class="left"><span class="required">*</span>Thermometers Calibrated:</td>
<td>
<label>
<input name="cal" type="radio" required id="cal_0" value="Yes" onChange="yesNo(this)">Yes</label>
<label>
<input name="cal" type="radio" required id="cal_1" value="No" onChange="yesNo(this)">No</label>
</td>
<td class="noborder"></td>
</tr>
<tr>
<td colspan="2" class="noborder"> </td>
</tr>
<!-- Cold Temps -->
<tr>
<th colspan="2" class="noborder">Cold Temperature Managment</th>
</tr>
<tr>
<td class="left"><span class="required">*</span>Maketable Air Temp (bottom):</td>
<td>
<input name="bottomair" type="text" required id="bottomair" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Maketable Air Temp (top):</td>
<td>
<input name="topair" type="text" required id="topair" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Maketable Meat Temp:</td>
<td>
<input name="meat" type="text" required id="meat" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Maketable Cheese Temp:</td>
<td>
<input name="cheese" type="text" required id="cheese" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Walk In Cooler Temp:</td>
<td>
<input name="walkin" type="text" required id="walkin" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr id="frig1" class="hide">
<td class="left"><span class="required">*</span>Refrigeration Unit #1:</td>
<td>
<input name="refrig1" type="text" required id="refrig1" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr id="frig2" class="hide">
<td class="left"><span class="required">*</span>Refrigeration Unit #2:</td>
<td>
<input name="refrig2" type="text" required id="refrig2" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr id="frig3" class="hide">
<td class="left"><span class="required">*</span>Refrigeration Unit #3:</td>
<td>
<input name="refrig3" type="text" required id="refrig3" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Freezer Unit #1:</td>
<td>
<input name="freez1" type="text" required id="freez1" size="3" onChange="freezValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Freezer Unit #2:</td>
<td>
<input name="freez2" type="text" required id="freez2" size="3" onChange="freezValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Freezer Unit #3:</td>
<td>
<input name="freez3" type="text" required id="freez3" size="3" onChange="freezValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr id="saladbar" class="hide">
<td class="left"><span class="required">*</span>Salad Bar Air Temp:</td>
<td>
<input name="saladair" type="text" required id="saladair" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr id="barcheese" class="hide">
<td class="left"><span class="required">*</span>Salad Bar Cheese Temp:</td>
<td>
<input name="saladcheese" type="text" required id="saladcheese" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="noborder" colspan="2"> </td>
</tr>
<!-- Hot Temp section -->
<tr>
<th class="noborder" colspan="2">Hot Temperature Management</th>
</tr>
<tr>
<td class="left"><span class="required">*</span>Wing Temp:</td>
<td>
<input name="wing" type="text" required id="wing" size="3" onChange="hotValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Meat Sauce/Soups Temp:</td>
<td>
<input name="sauce" type="text" required id="sauce" size="3" onChange="hotValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Hot Hold Timing System:</td>
<td>
<label>
<input name="hothold" type="radio" required id="hothold_0" value="Yes">Yes</label>
<label>
<input name="hothold" type="radio" required id="hothold_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="noborder" colspan="2"> </td>
</tr>
<!-- Oven Managment -->
<tr>
<th class="noborder" colspan="2">Oven Management</th>
</tr>
<tr>
<td class="left"><span class="required">*</span>Pizza Tepmp:</td>
<td>
<input name="pizza" type="text" required id="pizza" size="3" onChange="hotValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Pasta Temp:</td>
<td>
<input name="pasta" type="text" required id="pasta" size="3" onChange="hotValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="noborder" colspan="2"> </td>
</tr>
<!-- Oven speed and temp only needsto be done once a week -->
<tr>
<th class="noborder" colspan="2">Oven Temperatures and Speeds</th>
</tr>
<tr>
<td class="left">Top Oven:</td>
<td>Temp:
<input name="toptemp" type="text" id="toptemp" maxlength="3" size="4">
<br/>Speed:
<input name="topspeed" type="text" id="topspeed" maxlength="3" size="4">
</td>
</tr>
<tr>
<td class="left">Center Oven:</td>
<td>Temp:
<input name="centertemp" type="text" id="centertemp" maxlength="3" size="4">
<br/>Speed:
<input name="centerspeed" type="text" id="centerspeed" maxlength="3" size="4">
</td>
</tr>
<tr>
<td class="left">Bottom Oven:</td>
<td>Temp:
<input name="bottomtemp" type="text" id="bottomtemp" maxlength="3" size="4">
<br/>Speed:
<input name="bottomspeed" type="text" id="bottomspeed" maxlength="3" size="4">
</td>
</tr>
<tr>
<td class="noborder" colspan="2"> </td>
</tr>
<!-- This is the Yes/No section of the checklist Food Handling Section -->
<tr>
<th class="noborder" colspan="2">Food Hangling</th>
</tr>
<tr>
<td class="left"><span class="required">*</span>Only approved Ingredients Used:</td>
<td>
<label>
<input name="approve" type="radio" required id="approve_0" value="Yes">Yes</label>
<label>
<input name="approve" type="radio" required id="approve_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>No Spoiled/Expired food present:</td>
<td>
<label>
<input name="expired" type="radio" required id="expired_0" value="Yes">Yes</label>
<label>
<input name="expired" type="radio" required id="expired_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Wing Street Raw Zone Process Followed:</td>
<td>
<label>
<input name="raw" type="radio" required id="raw_0" value="Yes">Yes</label>
<label>
<input name="raw" type="radio" required id="raw_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Foodis Correcctly Date/Labeled & FIFO is followed:</td>
<td>
<label>
<input name="fifo" type="radio" required id="fifo_0" value="Yes">Yes</label>
<label>
<input name="fifo" type="radio" required id="fifo_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Whole Produce is Washed:</td>
<td>
<label>
<input name="produce" type="radio" required id="produce_0" value="Yes">Yes</label>
<label>
<input name="produce" type="radio" required id="produce_1" value="No">No</label>
</td>
</tr>
<!-- Sanitation Section -->
<tr>
<td class="left"><span class="required">*</span>Sanitizer is at Correct PPM:</td>
<td>
<label>
<input name="ppm" type="radio" required id="ppm_0" value="Yes">Yes</label>
<label>
<input name="ppm" type="radio" required id="ppm_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Hot Water ≥ 120°F at 3-Comp. Sink:</td>
<td>
<label>
<input name="hotwater" type="radio" required id="hotwater_0" value="Yes">Yes</label>
<label>
<input name="hotwater" type="radio" required id="hotwater_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Dishwasher has Soap & Sanitizer or ≥ 180°F Water:</td>
<td>
<label>
<input name="soap" type="radio" required id="soap_0" value="Yes">Yes</label>
<label>
<input name="soap" type="radio" required id="soap_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Chemicals stored Correctly:</td>
<td>
<label>
<input name="chem" type="radio" required id="chem_0" value="Yes">Yes</label>
<label>
<input name="chem" type="radio" required id="chem_1" value="No">No</label>
</td>
</tr>
<!-- Health & Hygiene Section -->
<tr>
<th class="left"><span class="required">*</span>No Ill Team Members Working:</th>
<td>
<label>
<input name="illteam" type="radio" required id="illteam_0" value="Yes">Yes</label>
<label>
<input name="illteam" type="radio" required id="illteam_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Correct Hand Washing Procedures Followed:</td>
<td>
<label>
<input name="wash" type="radio" required id="wash_0" value="Yes">Yes</label>
<label>
<input name="wash" type="radio" required id="wash_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Hand Sinks (Including Restrooms) are Stocked, Accessible & Used Properly:</td>
<td>
<label>
<input name="sinks" type="radio" required id="sinks_0" value="Yes">Yes</label>
<label>
<input name="sink" type="radio" required id="sinks_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Hair Restraints Worn Correctly:</td>
<td>
<label>
<input name="hair" type="radio" required id="hair_0" value="Yes">Yes</label>
<label>
<input name="hair" type="radio" required id="hair_1" value="No">No</label>
</td>
</tr>
<!-- Pest Management Section -->
<tr>
<td class="left"><span class="required">*</span>Pest Infestation or Activity is not Present and All Traps Placed Correctly:</td>
<td>
<label>
<input name="pest" type="radio" required id="pest_0" value="Yes">Yes</label>
<label>
<input name="pest" type="radio" required id="pest_1" value="No">No</label>
</td>
</tr>
</table>
</section>
</body>
Again, the goal of the jquery function should be to hide/show several of the table rows based upon the selected "store id".
Thank you in advance for any and all help

The jQuery version of this:
document.getElementById("frig1").classList.add("hide");
is
$("#frig1").hide();
To display the element, you would use
$("#frig1").show();
If you would like to hide multiple elements, you could use:
$("#frig1, #frig2").hide();

HTML + JQuery select all checkboxes, modify existing code

Good day,
I have once in a long dark past found some code to check or uncheck all paired checkboxes.
Now I have accidentally used the code twice. And I noticed that all of the checkboxes carrying the same name get selected. Hence a matter of duplicate ID's or names.
Now I want to alter this. But as soon as I am making just a small change to the existing code the script stops working.
And I have no idea at what line the script gets "corrupted".
This is the HTML code
<table class="panel_checkboxes" style="top: -20px;">
<tr>
<th>Select ALL</th>
<th>
<input id="selectall" class="regular-checkbox small-checkbox" type="checkbox" /><label for="selectall" style="margin-left: 25px;"></label></th>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td>Location 4</td>
<td>
<input id="checkbox-panel-4" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="4" /><label for="checkbox-panel-4" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 6</td>
<td>
<input id="checkbox-panel-6" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="6" /><label for="checkbox-panel-6" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 5</td>
<td>
<input id="checkbox-panel-5" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="5" /><label for="checkbox-panel-5" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 7</td>
<td>
<input id="checkbox-panel-7" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="7" /><label for="checkbox-panel-7" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 3</td>
<td>
<input id="checkbox-panel-3" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="3" /><label for="checkbox-panel-3" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 2</td>
<td>
<input id="checkbox-panel-2" checked="checked" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="2" /><label for="checkbox-panel-2" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
</table>
The JQUERY code :
//<![CDATA[
$(document).ready(function () {
$('#selectall').click(function () {
$('.selectedpanelsId').prop('checked', isChecked('selectall'));
});
});
function isChecked(checkboxId) {
var id = '#' + checkboxId;
return $(id).is(":checked");
}
function resetSelectAll() {
// if all checkbox are selected, check the selectall checkbox
// and viceversa
if ($(".selectedpanelsId").length == $(".selectedpanelsId:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
if ($(".selectedpanelsId:checked").length > 0) {
$('#edit').attr("disabled", false);
} else {
$('#edit').attr("disabled", true);
}
}
//]]>
Now what I want is to change the ID selectall to selectallLocations
And change the class : selectedpanelsId to SelectedLocationsID
Note I have created a fiddle so you can see what I mean:
JS Fiddle

HTML:
<table class="panel_checkboxes" style="top: -20px;">
<tr>
<th>Select ALL</th>
<th>
<input id="selectallLocations" class="regular-checkbox small-checkbox" type="checkbox" /><label for="selectall" style="margin-left: 25px;"></label></th>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td>Location 4</td>
<td>
<input id="checkbox-panel-4" class="regular-checkbox small-checkbox SelectedLocationsID" name="panels_set[]" type="checkbox" value="4" /><label for="checkbox-panel-4" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 6</td>
<td>
<input id="checkbox-panel-6" class="regular-checkbox small-checkbox SelectedLocationsID" name="panels_set[]" type="checkbox" value="6" /><label for="checkbox-panel-6" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 5</td>
<td>
<input id="checkbox-panel-5" class="regular-checkbox small-checkbox SelectedLocationsID" name="panels_set[]" type="checkbox" value="5" /><label for="checkbox-panel-5" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 7</td>
<td>
<input id="checkbox-panel-7" class="regular-checkbox small-checkbox SelectedLocationsID" name="panels_set[]" type="checkbox" value="7" /><label for="checkbox-panel-7" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 3</td>
<td>
<input id="checkbox-panel-3" class="regular-checkbox small-checkbox SelectedLocationsID" name="panels_set[]" type="checkbox" value="3" /><label for="checkbox-panel-3" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
<tr>
<td>Location 2</td>
<td>
<input id="checkbox-panel-2" checked="checked" class="regular-checkbox small-checkbox SelectedLocationsID" name="panels_set[]" type="checkbox" value="2" /><label for="checkbox-panel-2" style="margin-left: 25px;"></label></td>
<td> </td>
</tr>
</table>
Script:
$(document).ready(function () {
$('#selectallLocations').click(function () {
$('.SelectedLocationsID').prop('checked', isChecked('selectallLocations'));
});
});
function isChecked(checkboxId) {
var id = '#' + checkboxId;
return $(id).is(":checked");
}
function resetSelectAll() {
// if all checkbox are selected, check the selectall checkbox
// and viceversa
if ($(".SelectedLocationsID").length == $(".SelectedLocationsID:checked").length) {
$("#selectallLocations").attr("checked", "checked");
} else {
$("#selectallLocations").removeAttr("checked");
}
if ($(".SelectedLocationsID:checked").length > 0) {
$('#edit').attr("disabled", false);
} else {
$('#edit').attr("disabled", true);
}
}
Check updated DEMO

Getting the sum of all radio button values to display in a table

I have some radio buttons in a table and I’ve set a value to them. When the user selects them and clicks the submit button, I want the sum of those values to show in another table.
<tr>
<td>
<span id="Label1">hows the weather ?</span>
</td>
</tr>
<tr>
<td>
<table id="a1_1">
<tbody>
<tr>
<td>
<input type="radio" value="1" name="a1_1" id="a1_1_0">
<label for="a1_1_0">perfect</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="2" name="a1_1" id="a1_1_1">
<label for="a1_1_1">good</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="3" name="a1_1" id="a1_1_2">
<label for="a1_1_2">not bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="4" name="a1_1" id="a1_1_3">
<label for="a1_1_3">bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="5" name="a1_1" id="a1_1_4">
<label for="a1_1_4">very bad</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<span id="Label1">hows the weather ?</span>
</td>
</tr>
<tr>
<td>
<table id="a1_2">
<tbody>
<tr>
<td>
<input type="radio" value="1" name="a1_2" id="a1_1_0">
<label for="a1_2_0">perfect</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="2" name="a1_2" id="a1_1_1">
<label for="a1_2_1">good</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="3" name="a1_2" id="a1_1_2">
<label for="a1_2_2">not bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="4" name="a1_2" id="a1_1_3">
<label for="a1_2_3">bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="5" name="a1_1" id="a1_1_4">
<label for="a1_2_4">very bad</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>

To get the value of an element, you can set an id to the element, then reference the element by id.
ex.
<script>
function sumRadioInputs() {
var valueOfInput = document.getElementById("someElementId").value;
}
</script>
It is up to you to figure out how to chain all the inputs together

You can create a function that you'll call on click in that you can use
if (document.getElementById('a1_1_0').checked) {
value = document.getElementById('a1_1_0').value;
}
And so on for all the Radiobuttons

First you need to get the value of the checked radio buttons
The trick is to get it like this:
$("input[name='a1_1']:checked").val();
Code example
Afterwards you can do whatever you want with the values.
I hope this helps you.

JavaScript comparison in if not working?

I have following code to check maximum values of cars. But Whenever I select 10 in the table I didn't get the max value as 10 corresponding to the car.It is working good for other values except 10.
I debugged with alert and then I found the control is not at all entering in if condition even when the index[k] > max?
function findTop() {
var cars = ["Hyundai", "Maruti Suzuki", "Honda", "Chevrolet", "Tata"];
var index = [cars.length];
for (var i = 0; i < cars.length; i++) {
var list = document.getElementsByName(cars[i]);
for (var j = 0; j < 10; j++) {
if (list[j].checked == true) {
index[i] = list[j].value;
}
}
}
var max = 0;
var maxIndex = 0;
var text = "";
for (var k = 0; k < index.length; k++) {
alert(index[k] + " " + max);
if (index[k] >= max) {
alert(index[k] + " " + max);
max = index[k];
alert("max" + max);
maxIndex = k;
}
}
for (var l = 0; l < 5; l++) {
if (max == index[l]) {
text = text + "&nbsp" + cars[l];
}
}
document.getElementById("output").innerHTML = text + "&nbsp&nbsp&nbsp" + max;
}
<form>
<table border="1px" width="100%">
<tr>
<td></td>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
<td align="center">7</td>
<td align="center">8</td>
<td align="center">9</td>
<td align="center">10</td>
</tr>
<tr>
<td align="center">Hyundai</td>
<td align="center">
<input type="radio" name="Hyundai" value="1">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="2">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="3">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="4">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="5">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="6">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="7">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="8">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="9">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="10">
</td>
</tr>
<tr>
<td align="center">Maruti Suzuki</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="1">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="2">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="3">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="4">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="5">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="6">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="7">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="8">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="9">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="10">
</td>
</tr>
<tr>
<td align="center">Honda</td>
<td align="center">
<input type="radio" name="Honda" value="1">
</td>
<td align="center">
<input type="radio" name="Honda" value="2">
</td>
<td align="center">
<input type="radio" name="Honda" value="3">
</td>
<td align="center">
<input type="radio" name="Honda" value="4">
</td>
<td align="center">
<input type="radio" name="Honda" value="5">
</td>
<td align="center">
<input type="radio" name="Honda" value="6">
</td>
<td align="center">
<input type="radio" name="Honda" value="7">
</td>
<td align="center">
<input type="radio" name="Honda" value="8">
</td>
<td align="center">
<input type="radio" name="Honda" value="9">
</td>
<td align="center">
<input type="radio" name="Honda" value="10">
</td>
</tr>
<tr>
<td align="center">Chevrolet</td>
<td align="center">
<input type="radio" name="Chevrolet" value="1">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="2">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="3">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="4">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="5">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="6">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="7">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="8">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="9">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="10">
</td>
</tr>
<tr>
<td align="center">Tata</td>
<td align="center">
<input type="radio" name="Tata" value="1">
</td>
<td align="center">
<input type="radio" name="Tata" value="2">
</td>
<td align="center">
<input type="radio" name="Tata" value="3">
</td>
<td align="center">
<input type="radio" name="Tata" value="4">
</td>
<td align="center">
<input type="radio" name="Tata" value="5">
</td>
<td align="center">
<input type="radio" name="Tata" value="6">
</td>
<td align="center">
<input type="radio" name="Tata" value="7">
</td>
<td align="center">
<input type="radio" name="Tata" value="8">
</td>
<td align="center">
<input type="radio" name="Tata" value="9">
</td>
<td align="center">
<input type="radio" name="Tata" value="10">
</td>
</tr>
<tr>
<td colspan="11" align="center">
<input type="button" value="Top" onclick="findTop()">
</td>
</tr>
</table>
</form>
<p id="output"></p>
Sorry, I dont know how to add Jsfiddle link? Any suggestions what I am doing wrong?

Your values are all strings; "10" (the string) will never be greater than the string-compared values "9", etc.
You need to make sure your comparisons are numeric, which you can do like so:
if (+index[k] >= max) {
function findTop() {
var cars = ["Hyundai", "Maruti Suzuki", "Honda", "Chevrolet", "Tata"];
var index = [cars.length];
for (var i = 0; i < cars.length; i++) {
var list = document.getElementsByName(cars[i]);
for (var j = 0; j < 10; j++) {
if (list[j].checked == true) {
index[i] = list[j].value;
}
}
}
var max = 0;
var maxIndex = 0;
var text = "";
for (var k = 0; k < index.length; k++) {
console.log(index[k] + " " + max);
console.log(typeof index[k]);
if (+index[k] >= max) {
console.log(index[k] + " " + max);
max = index[k];
console.log("max " + max);
maxIndex = k;
}
}
for (var l = 0; l < 5; l++) {
if (max == index[l]) {
text = text + "&nbsp" + cars[l];
}
}
document.getElementById("output").innerHTML = text + "&nbsp&nbsp&nbsp" + max;
}
<form>
<table border="1px" width="100%">
<tr>
<td></td>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
<td align="center">7</td>
<td align="center">8</td>
<td align="center">9</td>
<td align="center">10</td>
</tr>
<tr>
<td align="center">Hyundai</td>
<td align="center">
<input type="radio" name="Hyundai" value="1">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="2">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="3">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="4">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="5">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="6">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="7">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="8">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="9">
</td>
<td align="center">
<input type="radio" name="Hyundai" value="10">
</td>
</tr>
<tr>
<td align="center">Maruti Suzuki</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="1">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="2">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="3">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="4">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="5">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="6">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="7">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="8">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="9">
</td>
<td align="center">
<input type="radio" name="Maruti Suzuki" value="10">
</td>
</tr>
<tr>
<td align="center">Honda</td>
<td align="center">
<input type="radio" name="Honda" value="1">
</td>
<td align="center">
<input type="radio" name="Honda" value="2">
</td>
<td align="center">
<input type="radio" name="Honda" value="3">
</td>
<td align="center">
<input type="radio" name="Honda" value="4">
</td>
<td align="center">
<input type="radio" name="Honda" value="5">
</td>
<td align="center">
<input type="radio" name="Honda" value="6">
</td>
<td align="center">
<input type="radio" name="Honda" value="7">
</td>
<td align="center">
<input type="radio" name="Honda" value="8">
</td>
<td align="center">
<input type="radio" name="Honda" value="9">
</td>
<td align="center">
<input type="radio" name="Honda" value="10">
</td>
</tr>
<tr>
<td align="center">Chevrolet</td>
<td align="center">
<input type="radio" name="Chevrolet" value="1">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="2">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="3">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="4">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="5">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="6">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="7">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="8">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="9">
</td>
<td align="center">
<input type="radio" name="Chevrolet" value="10">
</td>
</tr>
<tr>
<td align="center">Tata</td>
<td align="center">
<input type="radio" name="Tata" value="1">
</td>
<td align="center">
<input type="radio" name="Tata" value="2">
</td>
<td align="center">
<input type="radio" name="Tata" value="3">
</td>
<td align="center">
<input type="radio" name="Tata" value="4">
</td>
<td align="center">
<input type="radio" name="Tata" value="5">
</td>
<td align="center">
<input type="radio" name="Tata" value="6">
</td>
<td align="center">
<input type="radio" name="Tata" value="7">
</td>
<td align="center">
<input type="radio" name="Tata" value="8">
</td>
<td align="center">
<input type="radio" name="Tata" value="9">
</td>
<td align="center">
<input type="radio" name="Tata" value="10">
</td>
</tr>
<tr>
<td colspan="11" align="center">
<input type="button" value="Top" onclick="findTop()">
</td>
</tr>
</table>
</form>
<p id="output"></p>