We Keep Coding

How to make a total estimate calculator using checkboxes and jquery?

Is there anyone here who thinks they can help me solve an estimate calculator issue?
The user clicks on different checkboxes which stores a price value and for each checkbox they click it adds a total price. I got that working. But I cant find a way to give the checkbox a range price to display to the user
like this
This is mine, i put in plane text the range, but the value is actually only the first portion of the range unfortunately and I'm not getting to display the range
This is what is the code i tried:
`
<p class = "dropdown-details">Includes cost of parts and services for the <u>Engine</u></p>
<div id = "test"></div>
</div>
<br>
<!--Services with prices-->
<form action="" method="post" id= "engineRepair-form" class="price-form">
<table>
<tr>
<td class="services-row">
<input type="checkbox" name="array[]" id="oil" value="2126.15">
<label for="oil">Air Filter</label>
</td>
<td class = "price">
$2,126.15 - $2,622.25
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="gas" value="1063.08">
<label for="gas">Gas Filter</label>
</td>
<td class = "price">
$1,063.08 - $1,275.69
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="tires" value = "3614.46">
<label for="tires">Fuel Filter</label>
</td>
<td class = "price">
$3,614.46 - $4,394.05
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="sparkPlug" value = "5244.51">
<label for="sparkPlug">Spark Plug</label>
</td>
<td class = "price">
$5,244.51 - $6,449.33
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="belt_chain" value = "9355.07">
<label for="belt_chain">Timing Belt/Chain</label>
</td>
<td class = "price">
$9,355.07 - $1,1410.35
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="belt_drive" value = "3685.33">
<label for="belt_drive">Fan Belt/Drive Belt</label>
</td>
<td class = "price">
$3,685.33 - $4,323.18
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="radiatorHoseSet" value = "7228.92">
<label for="radiatorHoseSet">Radiator Hose Set</label>
</td>
<td class = "price">
$7,228.92 - $8,858.97
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="radiator" value = "27214.74">
<label for="radiator">Radiator</label>
</td>
<td class = "price">
$27,214.74 - $33,309.71
</td>
</tr>
</table>
</form>
`
Javascrip:
`
$(function() {
$('input').click(function() {
var total = 0;
$('input:checked').each(function(index, item) {
total += parseFloat(item.value);
});
$('#test').text(total.toFixed(2));
});
});
`
As you can see, the prices did add but it didn't display the range as showed in the first image I sent. It's supposed to display the total estimated price range
enter link description here
this is also the codepen

Here is this Answer
i used parentElement and NextSilbiling
$(function() {
$('input').click(function() {
var total1 = 0;
var total2 = 0;
$('input:checked').each(function(index, item) {
var items = item.parentElement.nextElementSibling.innerText.replace(/[$, ]/g,'').split("-");
total1 += Number(items[0]);
total2 += Number(items[1]);
});
$('#costOutput').text('$'+total1.toFixed(2)+' - '+ '$'+total2.toFixed(2));
});
});
https://bokboot.net/read?id=47&key=b3897fd0-315c-410d-ab2a-f61b8e8c4a4a
Copy and Paste in your project

First things first, please do not use the table tag for layout. It should be used for tabular data only. Its use for layout went out of style at the turn of the century!
Now, onto the problem at hand. As you've discovered, checkboxes can only have one value. We are going to leverage data attributes to give your more.
$(function() {
$('input').click(function() {
var minTotal = 0;
var maxTotal = 0
$('input:checked').each(function(index, item) {
//Add the value from the minval data attribute
minTotal += parseFloat(item.dataset.minval);
//Add the value from the maxval data attribute
maxTotal += parseFloat(item.dataset.maxval);
});
//Update the text field
$('#test').text("$" + minTotal.toFixed(2) + " - $" + maxTotal.toFixed(2) );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="dropdown-details">Includes cost of parts and services for the <u>Engine</u></p>
<div id="test"></div>
</div>
<br>
<!--Services with prices-->
<form action="" method="post" id="engineRepair-form" class="price-form">
<table>
<tr>
<td class="services-row">
<input type="checkbox" name="array[]" id="oil" data-minval="2126.15" data-maxval="2622.25" value="skuOil">
<label for="oil">Air Filter</label>
</td>
<td class="price">
$2,126.15 - $2,622.25
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" data-minval="1063.08" data-maxval="1275.69" id="gas" value="skuGas">
<label for="gas">Gas Filter</label>
</td>
<td class="price">
$1,063.08 - $1,275.69
</td>
</tr>
</table>

Javascript Get Selected Radio Button Values

I have been tasked with coding some javascript to add a pizza to a 'basket'. I have a 'Add to Basket' button which needs to get the name, description, size and price of the pizza.
Currently, I have managed to get the name and description of the pizza from the 'Add to Basket' button but I also need to get the price and size of the pizza which is determined from what radio button the user selects.
The html code was given to me.
<td>
<table border="0" cellpadding="0">
<tbody>
<tr align="center">
<td>
<input id="size" name="Cheese" data-price="6.50" value="Small" type="radio" checked>Small
</td>
<td>
<input id="size" name="Cheese" data-price="8.50" value="Medium" type="radio">Medium
</td>
<td>
<input id="size" name="Cheese" data-price="9.99" value="Large" type="radio">Large
</td>
</tr>
<tr align="center">
<td style="padding-top: 6px">£6.50</td>
<td style="padding-top: 6px">£8.50</td>
<td style="padding-top: 6px">£9.99</td>
</tr>
</tbody>
</table>
</td>
<td>
<input id="addbasket" name="Cheese" data-description="Mozzarella cheese" value="Add to Basket" type="button" onclick="addBasket(this)">
</td>
Here is the javascript, I was also asked to convert the NodeList to an array and then filter through that array to get the radio button that is checked which I think I have done with the first two lines.
function addBasket(button) {
var nodes = [].slice.call(document.getElementsByName(name));
var radio = nodes.filter(function(el){return el.checked;})[0];
var pizzaname = button.name;
var pizzadesc = button.getAttribute('data-description');
var pizzaprice = radio.dataset.price;
}
Now I don't know how to get the 'data-price' and the 'value' (size of pizza) from the radio button.

You can use radio.getAttribute('data-price') to get the price of the pizza and radio.value to get the size of the pizza. Also note that you can avoid using [].slice.call by using [].filter.call on your NodeList.
var name = 'Cheese'
function addBasket(button) {
var nodes = document.getElementsByName(button.name)
var radio = [].filter.call(nodes, function(e) {
return e.checked
})[0]
var pizzaname = button.name
var pizzadesc = button.getAttribute('data-description')
var pizzasize = radio.value
var pizzaprice = radio.getAttribute('data-price')
console.log({
Name: pizzaname,
Description: pizzadesc,
Size: pizzasize,
Price: pizzaprice
})
}
<td>
<table border="0" cellpadding="0">
<tbody>
<tr align="center">
<td>
<input name="Cheese" data-price="6.50" value="Small" type="radio" checked>Small
</td>
<td>
<input name="Cheese" data-price="8.50" value="Medium" type="radio">Medium
</td>
<td>
<input name="Cheese" data-price="9.99" value="Large" type="radio">Large
</td>
</tr>
<tr align="center">
<td style="padding-top: 6px">£6.50</td>
<td style="padding-top: 6px">£8.50</td>
<td style="padding-top: 6px">£9.99</td>
</tr>
</tbody>
</table>
</td>
<td>
<input id="addbasket" name="Cheese" data-description="Mozzarella cheese" value="Add to Basket" type="button" onclick="addBasket(this)">
</td>

helpicon functionality on form element using Jquery

I am having below form with helpIcon for every form element with description.
How we can show help when we are hover on help icon and mouseout using jquery?
I am quit new for jquery. so please can someone give simple implementation?
<table>
<tbody>
<tr><td>
Name:
</td>
<td>
<input type="text" name="name" class="dipika">
</td>
<td>
<img src="help.png" id="imgNamehelp">
</td>
<td><div id="divNamehelp" style="display: none;"> This is Full Name</div></td>
</tr>
<tr><td>
Color:
</td>
<td>
<input type="radio" value="red" name="Color" class="dipika"> Red
<input type="radio" value="yellow" name="Color" class="dipika"> Yellow
</td>
<td>
<img src="help.png" id="imgColorhelp">
</td>
<td><div id="divColorhelp" style="display: none;"> This is color choice</div></td>
</tr>
<tr><td>
Hobbies:
</td>
<td>
<input type="checkbox" value="cricket" name="cricket" class="dipika"> Cricket
<input type="checkbox" value="kabdi" name="kabdi" class="dipika"> Kabadi
</td>
<td>
<img src="help.png" id="imgHobbieshelp">
</td>
<td><div id="divHobbieshelp" style="display: none;"> This is Hobbies choice</div></td>
</tr>
<tr><td>
Address:
</td>
<td>
<textarea class="dipika"></textarea>
</td>
<td>
<img src="help.png" id="imgAddresshelp">
</td>
<td><div id="divAddresshelp" style="display: none;"> This is Hobbies choice</div></td>
</tr>
</tbody>
</table>
Can anybody help with this issue? Thanks in advance.

$(document).ready(function(){
$('img[src="help.png"]').mouseover(function(){
$('#'+getDivId(this)).fadeIn(500);
}).mouseout(function(){
$('#'+getDivId(this)).fadeOut(500);
});
function getDivId(helpId){
var helpId = $(helpId).attr('id');
return helpId.replace('img','div');
}
});

$(document).ready(function(){
$('img[src="help.png"]').hover(function(){
$('#'+getDivId(this)).fadeIn(500);
},function(){
$('#'+getDivId(this)).fadeOut(500);
});
function getDivId(helpId){
var helpId = $(helpId).attr('id');
return helpId.replace('img','div');
}
});

Insert a new row of input tags using JavaScript

I would like to append a new row of 5 input tags to the <td> element, which is a child of <tr class="unit">, and which is a grandchild of <table id="myTable"> element.
In my Javascript code, I was able to console-log the 5 input tags, but was not able to append them to the <td> element and to the rest of the parent elements.
Is my code on the right track for solving this?
Here's a link to the what I'm doing http://codepen.io/johnnyginbound/pen/xZxZNo?editors=101
function addRow(){
var parentTable = document.getElementById('myTable');
var tableRow = document.getElementsByTagName('tr')[0].children;
var unitTables = document.getElementsByClassName('unit-table')[0];
var newInputType = document.createElement('input');
newInputType.setAttribute('type', 'text');
for(var i=0; i<unitTables.children.length; i++){
var appendedInput = unitTables.children[i].appendChild(newInputType)
parentTable.appendChild(appendedInput);
}
}
document.getElementById('add_btn').onclick=addRow;
<form>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p> ASME Email: </p>
<input type="text" name="email">
<br />
<br />
</div>
<!-- Table -->
<table id="myTable" class="table">
<tr>
<th> Technology </th>
<th> Markets </th>
<th> Enduring/Emerging </th>
<th> ASME Relevency </th>
<th> Comments </th>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</div>
<button id="add_btn">Add new row</button>
<input type="submit" name="submit" value="Submit">
</form>

Your problem is the form tag which refresh your Web in each button event. Also your JavaScript code have several problems.
So your code should be
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p> ASME Email: </p>
<input type="text" name="email">
<br />
<br />
</div>
<!-- Table -->
<table id="myTable" class="table">
<tr>
<th> Technology </th>
<th> Markets </th>
<th> Enduring/Emerging </th>
<th> ASME Relevency </th>
<th> Comments </th>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</div>
JavaScript
function addRow(){
var parentTable = document.getElementById('myTable');
var myTd,myInput;
var myTr = document.createElement('tr');
myTr.setAttribute('class','unit-table');
for (var i=0; i<5;i++){
myTd = document.createElement('td');
myInput = document.createElement('input');
myInput.setAttribute('type','text');
myTd.appendChild(myInput);
myTr.appendChild(myTd);
}
parentTable.appendChild(myTr);
}
document.getElementById('add_btn').onclick=addRow;

And your javascript and html should be as follow
function addRow(){
var table = document.getElementById("myTable");
var rows = document.getElementById("myTable").rows.length;
var table = document.getElementById("myTable");
var rows = document.getElementById("myTable").rows.length;
// add row
var row = table.insertRow(rows);
// add input in cell
for(var i = 0; i < 5; i++){
var cell1 = row.insertCell(i);
var inputItem = document.createElement('input');
cell1.appendChild(inputItem);
}
}
document.getElementById('add_btn').onclick=addRow;
<form>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p> ASME Email: </p>
<input type="text" name="email">
<br />
<br />
</div>
<!-- Table -->
<table id="myTable" class="table">
<tr>
<th> Technology </th>
<th> Markets </th>
<th> Enduring/Emerging </th>
<th> ASME Relevency </th>
<th> Comments </th>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</div>
<input type="submit" name="submit" value="Submit">
</form>
<button id="add_btn">Add new row</button>

like this
function addRow(){
var table = document.getElementById("myTable");
var rows = document.getElementById("myTable").rows.length;
// add row
var row = table.insertRow(rows);
// add input in cell
for(var i = 0; i < 5; i++){
var cell1 = row.insertCell(i);
var inputItem = document.createElement('input');
cell1.appendChild(inputItem);
}
}

This took a lot of work. Here is my answer :)
https://jsfiddle.net/www139/1jwf02p7/
function addRow() {
var table = document.getElementById('myTable');
var columnLength = table.getElementsByTagName('tr')[0].children.length;
var units = document.getElementsByClassName('unit-table');
var tr = document.createElement('tr');
tr.className = 'unit-table';
for (var i = 0; i < columnLength; i++) {
var td = document.createElement('td');
var text = document.createElement('input');
text.type = 'text';
td.appendChild(text);
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById('add_btn').onclick = addRow;
<!--<form>-->
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>ASME Email:</p>
<input type="text" name="email">
<br />
<br />
</div>
<!-- Table -->
<table id="myTable" class="table">
<tr>
<th>Technology</th>
<th>Markets</th>
<th>Enduring/Emerging</th>
<th>ASME Relevency</th>
<th>Comments</th>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</div>
<button id="add_btn">Add new row</button>
<input type="submit" name="submit" value="Submit">
<!--</form>-->

Find hidden input value on same table row as checkbox

I have a Table in which I have checkboxes that onclick on checkboxes I want to know 2 things
ID of the checkbox
ID of the hidden field on same table row
So I do have a hidden field in each row and I want to know what that value is
My checkbox I can see from my Fiddle is GridView1__ctl3_chkOut but then I want jquery to find the value of the hidden field in same table row
I see that GridView1__ctl2_hndTxtId value is 3601 , but I will have many rows ...
Fiddle --> http://jsfiddle.net/bthorn/x9fc28nn/2/
jquery
$('.out').on('change', function () {
$(this).closest('tr').find('.out').not(this).prop('checked', false);
console.log(this.id);
//what is the hidden field value in same row?
});
$('.yesno').on('change', function () {
$(this).closest('tr').find('.yesno').not(this).prop('checked', false);
//what is the hidden field value in same row?
});
console.log shows me the ID
<table>
<tr>
<td style="width:5px;">
<input type="hidden" name="GridView1:_ctl2:hndTxtId" id="GridView1__ctl2_hndTxtId" value="3601">
</td>
<td style="width:50px;"> <span id="GridView1__ctl2_lblVehicle0">413</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblName2">LONG</span>
</td>
<td style="width:100px;"> <span id="GridView1__ctl2_lblEquip2">BKT/TDR/M</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblScheduleb">0600-1430</span>
</td>
<td style="width:50px;"> <span id="GridView1__ctl2_lblScheduleOrig2">8</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblTimeOn"></span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblTimeOff"></span>
</td>
<td>
<input id="GridView1__ctl2_chkOut" type="checkbox" name="GridView1:_ctl2:chkOut" checked="checked" class="out">
</td>
<td>
<input id="GridView1__ctl2_chkYes2" type="checkbox" name="GridView1:_ctl2:chkYes2" checked="checked" class="yesno">
</td>
<td>
<input id="GridView1__ctl2_chkNo2" type="checkbox" name="GridView1:_ctl2:chkNo2" class="yesno">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl2:AddButton0" value="On" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl2_AddButton0" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl2:txtStormTimeOn" type="text" value="9-15-2015 12:00" id="GridView1__ctl2_txtStormTimeOn">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl2:OffButton" value="Off" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl2_OffButton" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl2:txtStormTimeOff" type="text" value="9-15-2015 12:28" id="GridView1__ctl2_txtStormTimeOff">
</td>
<td style="width:500px;"> <span id="GridView1__ctl2_lblComments"></span>
</td>
<td style="width:500px;">
<input name="GridView1:_ctl2:txtStormComments" type="text" value="testfasdfsdfasdfsadfasdfsadf" maxlength="200" id="GridView1__ctl2_txtStormComments" style="width:200px;">
</td>
</tr>
<tr>
<td style="width:5px;">
<input type="hidden" name="GridView1:_ctl2:hndTxtId" id="GridView1__ctl2_hndTxtId" value="3601">
</td>
<td style="width:50px;"> <span id="GridView1__ctl3_lblVehicle0">215</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblName2">MORGAN</span>
</td>
<td style="width:100px;"> <span id="GridView1__ctl3_lblEquip2">BKT/TDR</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblScheduleb">0600-1430</span>
</td>
<td style="width:50px;"> <span id="GridView1__ctl3_lblScheduleOrig2">8</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblTimeOn"></span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblTimeOff"></span>
</td>
<td>
<input id="GridView1__ctl3_chkOut" type="checkbox" name="GridView1:_ctl3:chkOut" class="out">
</td>
<td>
<input id="GridView1__ctl3_chkYes2" type="checkbox" name="GridView1:_ctl3:chkYes2" class="yesno">
</td>
<td>
<input id="GridView1__ctl3_chkNo2" type="checkbox" name="GridView1:_ctl3:chkNo2" class="yesno">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl3:AddButton0" value="On" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl3_AddButton0" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl3:txtStormTimeOn" type="text" id="GridView1__ctl3_txtStormTimeOn">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl3:OffButton" value="Off" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl3_OffButton" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl3:txtStormTimeOff" type="text" id="GridView1__ctl3_txtStormTimeOff">
</td>
<td style="width:500px;"> <span id="GridView1__ctl3_lblComments"></span>
</td>
<td style="width:500px;">
<input name="GridView1:_ctl3:txtStormComments" type="text" maxlength="200" id="GridView1__ctl3_txtStormComments" style="width:200px;">
</td>
</tr>
</table>

You already got the ID of the checkbox. To get the value of the hidden input field of the row use the following code:
$('.yesno').on('change', function () {
$(this).closest('tr').find('input[type="hidden"]').val()
});
See this JSfiddle demo

You can find information about the selectors at : https://api.jquery.com/category/selectors/
Taking a part of your fiddle, it looks about:
$tr = $(this).closest('tr');
hidden = $tr.find('input[type="hidden"]');
console.log(hidden);

Use the find method as you are already using but with 'input[type=hidden]':
$('.out').on('change', function () {
var $tr = $(this).closest('tr');
$tr.find('.out').not(this).prop('checked', false);
console.log(this.id);
//what is the hidden field value in same row?
var hiddenVal = $tr.find('input[type=hidden]').val();
console.log(hiddenVal);
});
$('.yesno').on('change', function () {
var $tr = $(this).closest('tr');
$tr.find('.yesno').not(this).prop('checked', false);
//what is the hidden field value in same row?
var hiddenVal = $tr.find('input[type=hidden]').val();
console.log(hiddenVal);
});
Fiddle

You already have the id of the checkbox. You can get the id of the hidden input element using:
var hiddenID = $(this).closest('tr').find('input[type=hidden]').prop('id');
And you can get the value of the same field like so:
var hiddenVal = $(this).closest('tr').find('input[type=hidden]').val();