Develop Reference

Get all radio inputs from dynamically generated divs

I have a series of dynamically generated div that each one has 4 radio buttons inside:
$(".wrapper").on("custom", ".item", function(){
$.each($(".item"),function(){
// Get all radio names and check if at least one is checked
var radio_groups = [];
$.each($(this).find('input[type="radio"]'), function(){
var myname= this.name;
if($.inArray( myname, radio_groups ) < 0){
radio_groups.push(myname);
}
});
console.log(radio_groups);
return false;
// Check if there is a radio selected for each radio group
for(var i=0; i<radio_groups.length; i++) {
if($(this).find('input[type="radio"][name="' + radio_groups[i] + '"]:checked').length <= 0) {
// $('input[type="radio"][name="' + radio_groups[i] + '"]').first().closest('.row').append('<p class="input-error">Please select one option.</p>');
$('input[type="radio"][name="' + radio_groups[i] + '"]').first().closest('.condition').append('<p class="input-error">Please select one option.</p>');
errors = true;
}
}
})
})
$('.item').trigger("custom");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
</div>
I have tried this but doesn't seem to work, mostly the problem is that the .item divs are dynamically generated with php.

I probably didn't understand the problem but why not just use querySelectorAll with a simple forEach like that:
let result = [];
document.querySelectorAll('.item').forEach((el) =>{
const radioboxname = el.querySelectorAll('input[type="radio"]')[0].name;
if(!result.includes(radioboxname)){
result.push(radioboxname);
}
});
console.log(result);
<div class="wrapper">
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
</div>
<div class="item">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
</div>
<div class="item">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
</div>
</div>
After comment by OP
I add an array and instead of select all radios i select all item divs and check the name of first radio button compare with array and include if wasn't include

Add class to DIV element when quiz answer is correct or incorrect

I am trying to add a CSS class to a JavaScript created element, but am experiencing a reference error for the trackerMarker element. The tracker-marker DIVs are displaying on load, but are undefined when used in conjunction with the event listener.
I have tried using the createElement function inside and outside of the for loop.
I am not sure where the issue is. I am learning JS as I go, so any tips or suggestions are greatly appreciated.
function answerTracker() {
const answerTracker = document.querySelector(".tracker");
let questions = document.querySelectorAll(".container");
for (let i = 0; i < questions.length; i++) {
let trackerMarker = document.createElement("div");
trackerMarker.className = "tracker-marker";
answerTracker.appendChild(trackerMarker);
}
}
const runQuiz = (() => {
// Generate tracker
answerTracker();
let answers = document.querySelectorAll(".radio");
answers.forEach(function(answer) {
answer.addEventListener("click", (e) => {
let target = e.target;
let container = target.closest(".container");
let question = container.querySelector(".question");
let next = container.querySelector("button");
if (e.target.value == "t") {
trackerMarker.classList.add("correct");
} else {
trackerMarker.classList.add("incorrect");
}
if (next !== null && next !== "") {
next.style.display = "block";
}
question.style.display = "none";
});
});
})();
.tracker {
display: flex;
padding: 50px 0;
}
.tracker .tracker-marker {
width: 28px;
height: 28px;
margin: 0 1.25rem;
background-color: red;
border-radius: 100%;
}
.tracker .tracker-marker.correct {
background-color: blue;
}
.question {
margin-bottom: 18px;
}
.question .question__label {
margin-bottom: 8px;
}
<div class="tracker">
</div>
<fieldset class="container">
<div class="question">
<div class="question__label">
<span class="question-marker">1</span>
<label class="formControlLabel">Question One</label>
</div>
<input type="radio" name="form[question-one]" value="t" id="question-one0" class="radio">
<label for="question-one0">Answer A</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one1" class="radio">
<label for="question-one1">Answer B</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one2" class="radio">
<label for="question-one2">Answer C</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one3" class="radio">
<label for="question-one3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>
<fieldset class="container" style="display: none;">
<div class="question">
<div class="question__label">
<span class="question-marker">2</span>
<label class="formControlLabel">Question Two</label>
</div>
<input type="radio" name="form[question-two]" value="t" id="question-two0" class="radio">
<label for="question-two0">Answer A</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two1" class="radio">
<label for="question-two1">Answer B</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two2" class="radio">
<label for="question-two2">Answer C</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two3" class="radio">
<label for="question-two3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>
<fieldset class="container" style="display: none;">
<div class="question">
<div class="question__label">
<span class="question-marker">3</span>
<label class="formControlLabel">Question Three</label>
</div>
<input type="radio" name="form[question-three]" value="t" id="question-three0" class="radio">
<label for="question-three0">Answer A</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three1" class="radio">
<label for="question-three1">Answer B</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three2" class="radio">
<label for="question-three2">Answer C</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three3" class="radio">
<label for="question-three3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>

You never set trackerMarker inside runQuiz.
I used getElementsByClassName (because how you wrote your code) which will return an array of items which is not ideal. You should add an ID to your trackerMarker div and then use getElementById.
function answerTracker() {
const answerTracker = document.querySelector(".tracker");
let questions = document.querySelectorAll(".container");
for (let i = 0; i < questions.length; i++) {
let trackerMarker = document.createElement("div");
trackerMarker.className = "tracker-marker";
answerTracker.appendChild(trackerMarker);
}
}
const runQuiz = (() => {
// Generate tracker
answerTracker();
let answers = document.querySelectorAll(".radio");
answers.forEach(function(answer) {
answer.addEventListener("click", (e) => {
let target = e.target;
let container = target.closest(".container");
let question = container.querySelector(".question");
let next = container.querySelector("button");
let trackerMarker = document.getElementsByClassName('tracker-marker')[0];
// ^-- I added this line only
if (e.target.value == "t") {
trackerMarker.classList.add("correct");
} else {
trackerMarker.classList.add("incorrect");
}
if (next !== null && next !== "") {
next.style.display = "block";
}
question.style.display = "none";
});
});
})();
.tracker {
display: flex;
padding: 50px 0;
}
.tracker .tracker-marker {
width: 28px;
height: 28px;
margin: 0 1.25rem;
background-color: red;
border-radius: 100%;
}
.tracker .tracker-marker.correct {
background-color: blue;
}
.question {
margin-bottom: 18px;
}
.question .question__label {
margin-bottom: 8px;
}
<div class="tracker">
</div>
<fieldset class="container">
<div class="question">
<div class="question__label">
<span class="question-marker">1</span>
<label class="formControlLabel">Question One</label>
</div>
<input type="radio" name="form[question-one]" value="t" id="question-one0" class="radio">
<label for="question-one0">Answer A</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one1" class="radio">
<label for="question-one1">Answer B</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one2" class="radio">
<label for="question-one2">Answer C</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one3" class="radio">
<label for="question-one3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>
<fieldset class="container" style="display: none;">
<div class="question">
<div class="question__label">
<span class="question-marker">2</span>
<label class="formControlLabel">Question Two</label>
</div>
<input type="radio" name="form[question-two]" value="t" id="question-two0" class="radio">
<label for="question-two0">Answer A</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two1" class="radio">
<label for="question-two1">Answer B</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two2" class="radio">
<label for="question-two2">Answer C</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two3" class="radio">
<label for="question-two3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>
<fieldset class="container" style="display: none;">
<div class="question">
<div class="question__label">
<span class="question-marker">3</span>
<label class="formControlLabel">Question Three</label>
</div>
<input type="radio" name="form[question-three]" value="t" id="question-three0" class="radio">
<label for="question-three0">Answer A</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three1" class="radio">
<label for="question-three1">Answer B</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three2" class="radio">
<label for="question-three2">Answer C</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three3" class="radio">
<label for="question-three3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>

Passing certain form values over with a POST

What i am trying to do is, once my form is submitted, it will pass certain values from a form to PayPal.
This is my form code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" action="<?php echo whichPPUrl(); ?>" method="post" id="paypal_form" target="_blank">
<div class="form-group">
<label class="control-label col-xs-4" for="text">URL:</label>
<div class="col-xs-8">
<input id="text" name="url" placeholder="site.com" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4" for="checkbox"> </label>
<div class="col-xs-8">
<div class="checkbox">
<label class="checkbox">
<input type="checkbox" class="sum" name="metrics_1" value="1.00">
<strong>Moz</strong> - DA/PA/MozRank/Links In/Equity
</label>
</div>
<div class="checkbox">
<label class="checkbox">
<input type="checkbox" class="sum" name="metrics_2" value="1.00">
<strong>SEMRush</strong> - Rank/Keywords Number/Traffic/Costs/URL Links Number/Hostname Links Number/Domain Links Number
</label>
</div>
<div class="checkbox">
<label class="checkbox">
<input type="checkbox" class="sum" name="metrics_3" value="1.00">
<strong>Majestic</strong> - Rank/Keywords Number/Traffic/Costs/URL Links Number/Hostname Links Number/Domain Links Number
</label>
</div>
<div class="checkbox">
<label class="checkbox">
<input type="checkbox" class="sum" name="metrics_4" value="1.00">
<strong>Backlinks</strong> - Get any backlinks found for your domain plus anchor text (250 max.)
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="total" class="control-label col-xs-4">Cost ($):</label>
<div class="col-xs-8">
<input id="total" name="cost" type="text" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<label for="total" class="control-label col-xs-4"> </label>
<div class="col-xs-8">
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="business" value="contact#site.co.uk">
<input type="hidden" name="item_name" value="Wraith Metrics">
<input type="hidden" name="item_number" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="custom" value="getTheFormValues()">
<input type="hidden" name="amount" value="getAndPassTheCost()">
<input type="hidden" name="return" value="https://www.wraithseo.com/custom-metrics-builder.php?paid=1">
<input type="hidden" name="notify_url" value="https://www.wraithseo.com/gateway/ipn.php">
<input type="image" src="images/purchase.png" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
</div>
</div>
</div>
</form>
<script>
// pass the total value over to the form: <input type="hidden" name="amount" value="getTheCost()">
function getAndPassTheCost() {
return $("#total").val();
}
</script>
<script>
// pass the form values over and deal with them on the backend: <input type="hidden" name="custom" value="getTheFormValues()">
function getTheFormValues() {
return $("form").serialize();
}
</script>
<script>
$(document).ready(function() {
// updates / adds the checkbox values
function updateSum() {
var total = "0.00";
$(".sum:checked").each(function(i, n) {
let sum = parseFloat(total) + parseFloat($(n).val());
total = sum.toFixed(2);
});
$("#total").val(total);
}
// run the update on every checkbox change and on startup
$("input.sum").change(updateSum);
updateSum();
});
</script>
I am not the greatest with Ajax, i have done a basic example of what i think is the right way to go:
This function:
<script>
// pass the total value over to the form: <input type="hidden" name="amount" value="getTheCost()">
function getAndPassTheCost() {
return $("#total").val();
}
</script>
Would get the value from the input text box and pass it through to the post form.
This function:
<script>
// pass the form values over and deal with them on the backend: <input type="hidden" name="custom" value="getTheFormValues()">
function getTheFormValues() {
return $("form").serialize();
}
</script>
Would just serialize all the form data which i can then validate and process on the backend.
Have i over complicated the process? my issue is i'm not able to pass this data to the form whcih is then sent via POST to a PayPal script, any help in the right direction would be appreciated.

The inputs can only store strings they cannot store functions. Assign values to form controls by the .val() method. The functions getAndPassTheCost() and getTheFormValues() are useless. If you need to serialize the form, do it during the submit event. As for collecting all of the form values, that is done at submit event -- just ensure that whatever values you want sent has a [name] attribute.
Demo will send to a live test server -- the response will be displayed in the iframe below.
function updateSum() {
var total = 0;
$(".sum:checked").each(function(i) {
let sum = parseFloat($(this).val());
total += sum;
});
$("#total, .total").val(total.toFixed(2));
}
$("input.sum").on('change', updateSum);
$('paypal_form').on('submit', function(e) {
$(this).serialize();
});
.line.line.line {
margin: -5px auto 5px
}
.img.img.img {
margin: -40px auto 0 -70px;
}
.img.img.img:focus {
outline: none
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<main class='container'>
<form class="form-horizontal" action="https://httpbin.org/post" method="post" id="paypal_form" target="response">
<section class='form-row'>
<fieldset class='form-group col'>
<legend>Wraith SEO</legend>
<input id="text" name="url" placeholder="site.com" type="text" class="form-control" required pattern='[a-z0-9]+?[.][a-z]{3,}'>
</fieldset>
</section>
<hr class='line'>
<section class='form-row'>
<div class='form-group col'>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="sum form-check-input" name="metrics_1" value="1.00"> 1.00</label></div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="sum form-check-input" name="metrics_2" value="1.00"> 1.00</label></div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="sum form-check-input" name="metrics_3" value="1.00"> 1.00</label></div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="sum form-check-input" name="metrics_4" value="1.00"> 1.00</label></div>
<label for='total' class="label-control">Total: $
<output id='total' value='0.00'> </output></label>
<input class='total' name='total' type='hidden' value=''>
</div>
</section>
<section class='form-row'>
<fieldset class='form-group mb-4'>
<input type="image" src="https://www.shareicon.net/data/128x128/2017/06/22/887585_logo_512x512.png" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" class='float-right img'>
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="contact#site.co.uk">
<input type="hidden" name="item_name" value="Wraith Metrics">
<input type="hidden" name="item_number" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="return" value="https://www.wraithseo.com/custom-metrics-builder.php?paid=1">
<input type="hidden" name="notify_url" value="https://www.wraithseo.com/gateway/ipn.php">
<iframe name='response' width='70%' class='float-left'></iframe>
</fieldset>
</section>
</form>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Radio buttons in the form, if one checked then unchecked the others?

I have three different group of radio buttons in my form. If I click on the radio button I don't see attribute checked set to true. I'm wondering what is the best way to handle this in JQuery/JavaScript? Here is example:
$("input[type=radio]").on('click', function() {
var secondClick = true;
$(this).change(function() {
secondClick = false;
});
$(this).click(function() {
if (secondClick) {
$(this).prop("checked", false);
}
secondClick = true;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" id="myForm" method="POST" action="#">
<div class="formItem">
<label for="evaluation">Evaluation</label>
<input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
<input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
</div>
<div class="formItem">
<label for="conditions">Conditions</label>
<input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
<input type="radio" name="frmhs_cond" id="frm_cond2" value="1" />Fair
<input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
</div>
<div class="formItem">
<label for="responses">Responses</label>
<input type="radio" name="frm_res" id="frm_res1" value="0" />Good
<input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
<input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
</div>
</form>
Function above did not change/set the attribute checked=true on the element that I clicked. I would like to see selected element with an attribute checked true and all other check boxes to be set to false.

var radioInputs = $("#myForm input[type=radio]")
radioInputs.on('change',function() {
var $this = $(this)
if ($this.is(':checked')) {
radioInputs.not($this).removeAttr('checked')
}
})

Your second input in conditions was named frmhs_cond instead of frm_cond
<form name="myForm" id="myForm" method="POST" action="#">
<div class="formItem">
<label for="evaluation">Evaluation</label>
<input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
<input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
</div>
<div class="formItem">
<label for="conditions">Conditions</label>
<input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
<input type="radio" name="frm_cond" id="frm_cond2" value="1" />Fair
<input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
</div>
<div class="formItem">
<label for="responses">Responses</label>
<input type="radio" name="frm_res" id="frm_res1" value="0" />Good
<input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
<input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
</div>
</form>

How to get different values of text box in jQuery?

I am using jQuery and I need to pass different values of same text box on different radio button clicks like text box name actual has four different values on selecting the different radio buttons how can I pass this?
<script type="text/javascript" src="jquery.min2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#loads').closest('div').hide();
$('#units').val('0');
$('input[name="myradio"]').change(function(){
if($('input[name="myradio"]:checked').val() == '100')
$('#loads').closest('div').hide();
else
$('#loads').closest('div').show();
});
$('input[readonly]').each(function(){
$(this).val('0');
});
$('#actual').val('2.56');
$("input:radio[name=myradio], #btn-calculate").click(function() {
if ($('input[name=myradio]:radio:checked').val() == '100'){
$('#actual').val('2.56');
$('#charges').val('20');
} else if ($('input[name=myradio]:radio:checked').val() == '200'){
$('#actual').val('3.50');
$('#charges').val('40');
} else if ($('input[name=myradio]:radio:checked').val() == '300'){
$('#actual').val('4.50');
$('#charges').val('60');
} else if ($('input[name=myradio]:radio:checked').val() == '400'){
$('#actual').val('5.50');
$('#charges').val('80');
}
$('#tax').val(($('#units').val())*($('#actual').val()));
$('#elec').val(($('#units').val())*($('#actual').val()));
$('#amount').val(parseInt(($('#charges').val()))+parseInt(($('#actual').val())));
$('#govt').val(($('#actual').val())-($('#units').val()));
$('#result').val(($('#amount').val())-($('#govt').val()));
});
</script>
<form method="POST" name="form1">
<label>Select your category:</label>
<label class="radio">
<input type="radio" value="100" name="myradio" checked="checked" />Domestic</label>
<label class="radio">
<input type="radio" value="200" name="myradio" />a</label>
<label class="radio">
<input type="radio" value="300" name="myradio" />b</label>
<label class="radio">
<input type="radio" value="400" name="myradio" />c</label>
<div>
<label for="units">No of units(kwh) used</label>
<input type="text" name="units" id="units" />
</div>
<div>
<label for="loads">Connected loads(kwh)</label>
<input type="text" name="loads" id="loads" />
</div>
<div>
<label for="actual">Actual</label>
<input type="text" data-value="2.60" readonly="readonly" name="actual" id="actual" />
</div>
<div>
<label for="tax">Tax</label>
<input type="text" readonly="readonly" name="tax" id="tax" />
</div>
<div>
<label for="elec">Elec</label>
<input type="text" readonly="readonly" name="elec" id="elec" />
</div>
<div>
<label for="charges">Charges</label>
<input type="text" readonly="readonly" name="charges" id="charges" />
</div>
<div>
<label for="amount">Amount</label>
<input type="text" readonly="readonly" name="amount" id="amount" />
</div>
<div>
<label for="govt">Govt</label>
<input type="text" readonly="readonly" name="govt" id="govt" />
</div>
<div>
<label for="result">Result</label>
<input type="text" readonly="readonly" name="result" id="result" />
</div>
<button type="button" id="btn-calculate">Calculate</button>
</form>
Similarly I want this in text box name amount=charges+actual and in text box name govt=actual-units and in text box name result=amount-govt for above four radio button
jsFiddle of the code.

<!DOCTYPE html>
<head>
<style type="text/css">
div {
margin: 10px 0;
}
div label {
width: 140px;
display: inline-block;
text-align: right;
}
input[readonly] {
background: #eee;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#loads').closest('div').hide();
$('#units').val('0');
$('input[name="myradio"]').change(function(){
if($('input[name="myradio"]:checked').val() == '100')
$('#loads').closest('div').hide();
else
$('#loads').closest('div').show();
});
$('input[readonly]').each(function(){
$(this).val('0');
});
$('#actual').val('2.56');
$("input:radio[name=myradio], #btn-calculate").click(function() {
if ($('input[name=myradio]:radio:checked').val() == '100'){
$('#actual').val('2.56');
$('#charges').val('20');
} else if ($('input[name=myradio]:radio:checked').val() == '200'){
$('#actual').val('3.50');
$('#charges').val('40');
} else if ($('input[name=myradio]:radio:checked').val() == '300'){
$('#actual').val('4.50');
$('#charges').val('60');
} else if ($('input[name=myradio]:radio:checked').val() == '400'){
$('#actual').val('5.50');
$('#charges').val('80');
}
$('#tax').val(($('#units').val())*($('#actual').val()));
$('#elec').val(($('#units').val())*($('#actual').val()));
$('#amount').val(parseInt(($('#charges').val()))+parseInt(($('#actual').val())));
$('#govt').val(($('#actual').val())-($('#units').val()));
$('#result').val(($('#amount').val())-($('#govt').val()));
});
});
</script>
</head>
<body>
<form method="POST" name="form1">
<label>Select your category:</label>
<label class="radio">
<input type="radio" value="100" name="myradio" checked="checked" />Domestic</label>
<label class="radio">
<input type="radio" value="200" name="myradio" />a</label>
<label class="radio">
<input type="radio" value="300" name="myradio" />b</label>
<label class="radio">
<input type="radio" value="400" name="myradio" />c</label>
<div>
<label for="units">No of units(kwh) used</label>
<input type="text" name="units" id="units" />
</div>
<div>
<label for="loads">Connected loads(kwh)</label>
<input type="text" name="loads" id="loads" />
</div>
<div>
<label for="actual">Actual</label>
<input type="text" data-value="2.60" readonly="readonly" name="actual" id="actual" />
</div>
<div>
<label for="tax">Tax</label>
<input type="text" data-value="0.00" readonly="readonly" name="tax" id="tax" />
</div>
<div>
<label for="charges">Charges</label>
<input type="text" data-value="20.00" readonly="readonly" name="charges" id="charges" />
</div>
<div>
<label for="amount">Amount</label>
<input type="text" data-value="2.60" readonly="readonly" name="amount" id="amount" />
</div>
<div>
<label for="govt">Govt</label>
<input type="text" data-value="2.60" readonly="readonly" name="govt" id="govt" />
</div>
<div>
<label for="result">Result</label>
<input type="text" readonly="readonly" name="result" id="result" />
</div>
<button type="button" id="btn-calculate">Calculate</button>
</form>
</body>
</html>

simply use click events for each of the radio buttons;
<input type="radio" value="200" name="myradio" id="radio_A"/>a
$('#radio_A').on('click', function() { $('#actual').val(somevalue); });
http://jsfiddle.net/c9sHt/32/