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/
Related
I am trying to enable disable very next input field with check uncheck of a closest checkbox.
I tried the following script.
$(document).on('change', '.check:checkbox', function(){
if (this.checked) {
$(this).next().prop('disabled', false);
}else{
$(this).next(".inputs").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
As your HTML stands, .next() points to the label element.
You should first target the closest div then find the respective element from that div element:
$(this).closest('div').find('.inputs')
$(document).on('change', '.check:checkbox', function(){
var currentEl = $(this).closest('div').find('.inputs');
if (this.checked) {
currentEl.prop('disabled', false);
}else{
currentEl.prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
$(this).next() is the <label>, and next after that is <br>.
Use .nextAll() to get all the following siblings that match a selector, and .first() to get the first one of these.
$(document).on('change', '.check:checkbox', function() {
let nextinput = $(this).nextAll(".inputs").first();
nextinput.prop('disabled', !this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class "one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
You should change the <label>, wrapping the checkbox. This will improve the user experience. Then change the jQuery selector to $(this).closest("div").find(".inputs") in order to address the right input element.
$(document).on('change', '.check:checkbox', function(){
$(this).closest("div").find(".inputs").prop('disabled',!this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="a">
</div>
<div class"two">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="b">
</div>
<div class"three">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="c">
</div>
You are almost there. next() element is not input, it's label so why your code is fail. You can increase the next()(next().next()...) until you find proper element.
There are several way to find desire input to enable/disable. If your DOM is not changeable and there are only 1 sibling input use siblings('input').
Example:
$(document).on('change', '.check:checkbox', function() {
if (this.checked) {
$(this).siblings('input').prop('disabled', false);
} else {
$(this).siblings(".inputs").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class "one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
I am trying to show an error if a user presses submit and doesn't check one of the radio buttons. That part works fine. Now, my issue is that even when the radio button is checked and the user presses the button.. the error shows right before the form submits. Why is that error showing when the radio button is checked? Any help will be appreciated.
HTML:
<form action="javascript:void(0);">
<input type="submit" class="add-cart " value="Add">
<br />
<p class="option-name">Size : </p>
<input type="radio" required="required" aria-required="true" id="product1" value="1" name="options[]" />
<label class="label" for="product1">Small</label>
<input type="radio" required="required" aria-required="true" id="product3" value="3" name="options[]" />
<label class="label" for="product3">Medium</label>
<input type="radio" required="required" aria-required="true" id="product4" value="4" name="options[]" />
<label class="label" for="product4">Large</label>
<input type="radio" required="required" aria-required="true" id="product5" value="5" name="options[]" />
<label class="label" for="product5">X-Large</label>
</form>
JS:
$(document).ready(function() {
var count = 0;
$(".add-cart").click(function() {
if (!$("input[name='options']").is(':checked') && count <= 0) {
$(".option-name").append("<p class='option-error'>This field is required</p>");
count++;
}
});
});
JSFiddle Demo
You're not currently resetting between uses, here's a new version:
$(document).ready(function() {
$(".add-cart").click(function() {
$(".option-error").html("");
if (!$("input[name='options[]']:checked").val()) {
$(".option-error").html("This field is required");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="javascript:void(0);">
<input type="submit" class="add-cart " value="Add">
<br />
<p class="option-name">Size : <p class="option-error"></p></p>
<input type="radio" required="required" aria-required="true" id="product1" value="1" name="options[]" />
<label class="label" for="product1">Small</label>
<input type="radio" required="required" aria-required="true" id="product3" value="3" name="options[]" />
<label class="label" for="product3">Medium</label>
<input type="radio" required="required" aria-required="true" id="product4" value="4" name="options[]" />
<label class="label" for="product4">Large</label>
<input type="radio" required="required" aria-required="true" id="product5" value="5" name="options[]" />
<label class="label" for="product5">X-Large</label>
</form>
im sorry but i tried everything that's available in the internet but all "solutions" doesnt work.
if the radio button is clicked, the textbox under that radio button will be enabled.else disabled.
pls help me with this.when i click the radio button, the textbox is still disabled.
js
function radioModeOfPayment(x){
if(document.getElementById('mMininum').checked == true){
document.getElementById("mMininum-amount").disabled = false;
document.getElementById("first").disabled = false;
document.getElementById("numMonth-months").disabled = true;
}
if(document.getElementById('numMonth').checked == true){
document.getElementById("numMonth-months").disabled = false;
document.getElementById("mMininum-amount").disabled = true;
document.getElementById("first").disabled = true;
}
}
html
<div class="trbl-padding-5">
<input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum" onclick="radioModeOfPayment(this);"> <label class="w3-validate">Minimum Payment</label><br>
<input type="text" class="tlabel" readonly="true" value="Amount"> <input type="text" class="tlabel w3-border" disabled="disabled" id="mMininum-amount" name="mMininum-amount" value=""><br>
<input type="text" class="tlabel" readonly="true" value="Starting Date"> <input type="date" disabled="disabled" id="first" name="sdate"><br>
</div>
<div class="trbl-padding-5">
<input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth" onclick="radioModeOfPayment(this);"> <label class="w3-validate">Number of Months</label><br>
<input type="text" class="tlabel" readonly="true" value="Months"> <input type="text" class="tlabel w3-border" readonly="true" id="numMonth-months" name="numMonth-months" value=""><br>
</div>
remove input text readonly attribute
function radioModeOfPayment(x) {
if (document.getElementById('mMininum').checked == true) {
document.getElementById("mMininum-amount").disabled = false;
document.getElementById("first").disabled = false;
document.getElementById("numMonth-months").disabled = true;
}
if (document.getElementById('numMonth').checked == true) {
document.getElementById("numMonth-months").disabled = false;
document.getElementById("mMininum-amount").disabled = true;
document.getElementById("first").disabled = true;
}
}
<div class="trbl-padding-5">
<input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum" onclick="radioModeOfPayment(this);">
<label class="w3-validate">Minimum Payment</label>
<br>
<input type="text" class="tlabel" readonly="true" value="Amount">
<input type="text" class="tlabel w3-border" disabled="disabled" id="mMininum-amount" name="mMininum-amount" value="">
<br>
<input type="text" class="tlabel" readonly="true" value="Starting Date">
<input type="date" disabled="disabled" id="first" name="sdate">
<br>
</div>
<div class="trbl-padding-5">
<input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth" onclick="radioModeOfPayment(this);">
<label class="w3-validate">Number of Months</label>
<br>
<input type="text" class="tlabel" readonly="true" value="Months">
<input type="text" class="tlabel w3-border" id="numMonth-months" name="numMonth-months" value="">
<br>
</div>
EDIT 2
In Snippet 2 it is exactly the same as OP's layout. By adding nth-of-type, the inputs on the right-side are the only inputs that are enabled and disabled while the ones on the left are unaffected. The attribute disabled and have been removed.
EDIT
Sorry forgot OP wants radio buttons, it works just as well.
Here's a simple CSS only solution.
This uses:
adjacent sibling selector
pointer-events
SNIPPET 1
.chx:checked + input {
pointer-events: none;
}
.chxs:checked ~ input {
pointer-events: none
}
input[name="rad"]:checked + input[type="text"] {
pointer-events: none;
}
<p>This example uses + which affects only the sibling that's immediately after .chx</p>
<input class='chx' type='checkbox'>
<input>
<br/>
<br/>
<p>This example uses ~ which affects all siblings that follow .chxs</p>
<input class='chxs' type='checkbox'>
<input>
<input>
<input>
<br/>
<br/>
<p>Works on radio buttons as well</p>
<fieldset>
<input name='rad' type='radio'>
<input type='text'>
</fieldset>
<fieldset>
<input name='rad' type='radio'>
<input type='text'>
</fieldset>
SNIPPET 2
.w3-radio:checked ~ input:nth-of-type(2n-1) {
pointer-events: none;
}
<div class="trbl-padding-5">
<input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum">
<label class="w3-validate">Minimum Payment</label>
<br>
<input type="text" class="tlabel" readonly=true value="Amount">
<input type="text" class="tlabel w3-border" id="mMininum-amount" name="mMininum-amount" value="">
<br>
<input type="text" class="tlabel" readonly=true value="Starting Date">
<input type="date" id="first" name="sdate">
<br>
</div>
<div class="trbl-padding-5">
<input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth">
<label class="w3-validate">Number of Months</label>
<br>
<input type="text" class="tlabel" readonly=true value="Months">
<input type="text" class="tlabel w3-border" id="numMonth-months" name="numMonth-months" value="">
<br>
</div>
HTML
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" /><label for="cat_1">cat_1</label><br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" /><label for="cat_2">cat_2</label><br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" /><label for="cat_3">cat_3</label><br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" /><label for="cat_4">cat_4</label><br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" /><label for="cat_5">cat_5</label><br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" /><label for="cat_6">cat_6</label><br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" /><label for="cat_7">cat_7</label><br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" /><label for="cat_8">cat_8</label><br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" /><label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Javascript
function calcAndShowTotal(){
var total = 0;
$('#catlist :checkbox[checked]').each(function(){
total =+ parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#pricelist :checkbox').click(function(){
calcAndShowTotal();
});
calcAndShowTotal();
I am getting particular value. WHY? I tried sum of total, i tried jquery but no success..
Use $('#catlist :checkbox:checked') selector to select checked check-boxes
[] is used as attribute selector and it could be used as '[type="checkbox"]' but it will not filter checked check-boxes
+ operator is not needed before parseFloat, it has to be total =+
Instead of calling handler, just invoke change handler using .change()
function calcAndShowTotal() {
var total = 0;
$('#catlist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#catlist :checkbox').change(calcAndShowTotal).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" />
<label for="cat_1">cat_1</label>
<br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" />
<label for="cat_2">cat_2</label>
<br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" />
<label for="cat_3">cat_3</label>
<br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" />
<label for="cat_4">cat_4</label>
<br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" />
<label for="cat_5">cat_5</label>
<br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" />
<label for="cat_6">cat_6</label>
<br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" />
<label for="cat_7">cat_7</label>
<br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" />
<label for="cat_8">cat_8</label>
<br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" />
<label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Using Array#reduce
function calcAndShowTotal() {
var total = [].reduce.call($('#catlist :checkbox:checked'), function(a, b) {
return a + +$(b).attr('price') || 0;
}, 0);
$('#total').val(total);
}
$('#catlist :checkbox').change(calcAndShowTotal).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" />
<label for="cat_1">cat_1</label>
<br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" />
<label for="cat_2">cat_2</label>
<br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" />
<label for="cat_3">cat_3</label>
<br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" />
<label for="cat_4">cat_4</label>
<br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" />
<label for="cat_5">cat_5</label>
<br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" />
<label for="cat_6">cat_6</label>
<br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" />
<label for="cat_7">cat_7</label>
<br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" />
<label for="cat_8">cat_8</label>
<br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" />
<label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Instead of looping you can use change which will respond to and change event on the checkbox. Also you need add or subtract value like this += for addition on -= for subtraction
var _total = 0;
$('input[type="checkbox"]').change(function() {
if($(this).is(':checked')){
_total += parseFloat($(this).attr('price')) || 0;
}
else{
_total -= parseFloat($(this).attr('price')) || 0;
}
$('#total').val(_total);
})
JSFIDDLE
$('input:checkbox').change(function(){
var totalprice=0;
$('input:checkbox:checked').each(function(){
totalprice+= parseFloat($(this).attr('price'));
});
$('#total').val(totalprice)
});
I have a form that if have checked TransientDevice, ControllingFrequency, and InterEntity then put Yes in the result input. How do I use multiple checkboxes to accomplish this? It works with one checkbox now, the "test" checkbox. I am not sure how to check for more than one checkbox.
<form id="form1" name="form1" method="post" action="add_test.asp">
<input type="checkbox" name="TransientDevice" id="TransientDevice" value="" />
<input type="checkbox" name="DynamicResponse" id="DynamicResponse" value="" />
<input type="checkbox" name="ControllingFrequency" id="ControllingFrequency" value="" />
<input type="checkbox" name="ControllingVoltage" id="ControllingVoltage" value="" />
<input type="checkbox" name="InterEntity" id="InterEntity" value="" />
<input type="checkbox" name="ReliabilityImpact" id="ReliabilityImpact" value="" />
<input type="checkbox" name="test" id="test" class="checkbox" value="" />
<input type="text" name="result" id="result" value="" />
<script type="text/javascript">
$(function(){
$('#test').change(function() {
$("#result").val(($(this).is(':checked')) ? "yes" : "");
});
});
</script>
</form>
I believe this is what you're asking for:
$('#TransientDevice, #ControllingFrequency, #InterEntity').change(function() {
$("#result").val(($('#TransientDevice').is(':checked') && $('#ControllingFrequency').is(':checked') && $('#InterEntity').is(':checked')) ? "yes" : "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post" action="add_test.asp">
<input type="checkbox" name="TransientDevice" id="TransientDevice" value="" />
<input type="checkbox" name="DynamicResponse" id="DynamicResponse" value="" />
<input type="checkbox" name="ControllingFrequency" id="ControllingFrequency" value="" />
<input type="checkbox" name="ControllingVoltage" id="ControllingVoltage" value="" />
<input type="checkbox" name="InterEntity" id="InterEntity" value="" />
<input type="checkbox" name="ReliabilityImpact" id="ReliabilityImpact" value="" />
<input type="checkbox" name="test" id="test" class="checkbox" value="" />
<input type="text" name="result" id="result" value="" />
</form>