This has been driving me crazy for hours. I'm trying to get an array with the values of all "checked" checkboxes when "All" is selected. For some reason, on my site, when I check "All" it returns an empty set, but when I uncheck it the correct values are returned.
The craziest part is that I made a CodePen with the stripped down code and it works as expected, and I can't figure out what is different about my site.
The checkbox is the one above the States that says "All" here: https://dev.vmc.w3.uvm.edu/xana/climateIndicators/table
//check all state checkboxes
$('#all_states').click(function() {
checkCheckboxes(this.id, 'all_states__checkboxes');
});
function checkCheckboxes(id, pID) {
$('#' + pID).find(':checkbox').each(function() {
jQuery(this).prop('checked', $('#' + id).is(':checked'));
});
}
//state filter
$('.state_checkbox').on('click', function() {
var search = [];
$('.state_sub_checkbox:checked').each(function() {
var group = $(this).val();
search.push(group.trim());
});
console.log(search);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
My HTML code: ```
<div class="px-3 py-3">
<form>
<div class="form-group form-check mb-2">
<input type="checkbox" class="form-check-input state_checkbox" id="all_states">
<label class="form-check-label" for="All">All</label>
</div>
<div class="row pl-3" id="all_states__checkboxes">
<div class="col-lg">
<div class="form-group form-check mb-0">
<input type="checkbox" class="form-check-input state_sub_checkbox" value="CT" id="Connecticut">
<label class="form-check-label" for="Connecticut">Connecticut</label>
</div>
<div class="form-group form-check mb-0">
<input type="checkbox" class="form-check-input state_sub_checkbox" value="ME" id="Maine">
<label class="form-check-label" for="Maine">Maine</label>
</div>
<div class="form-group form-check mb-0">
<input type="checkbox" class="form-check-input state_sub_checkbox" value="MA" id="Massachussetts">
<label class="form-check-label" for="Massachussetts">Massachussetts</label>
</div>
</div>
<div class="col-lg">
<div class="form-group form-check mb-0">
<input type="checkbox" class="form-check-input state_sub_checkbox" value="NH" id="NewHampshire">
<label class="form-check-label" for="NewHampshire">New Hampshire</label>
</div>
<div class="form-group form-check mb-0">
<input type="checkbox" class="form-check-input state_sub_checkbox" value="NY" id="NewYork">
<label class="form-check-label" for="NewYork">New York</label>
</div>
<div class="form-group form-check mb-0">
<input type="checkbox" class="form-check-input state_sub_checkbox" value="VT" id="NewYork">
<label class="form-check-label" for="Vermont">Vermont</label>
</div>
</div>
</div>
</form>
</div>
Try
$('#all_states__checkboxes').on('click', function() {
const all= $('[type=checkbox]',this).length
const checked = $('[type=checkbox]:checked',this).length
$('#all_states').prop('checked', all===checked);
});
$('#all_states').on('click',function() {
$('#all_states__checkboxes [type=checkbox]').attr('checked',this.checked)
})
Related
I have struggeling with my problem for days now and cant find a solution.
Im trying to validate my Radiobuttons, when i submit the form i want it to validate if the radio buttons is empty and then add a is-invalid class from bootstrap, and if some of the buttons are checked i want it to add Class is-valid. When i submit the form right now it only adds class is-invalid.
HTML
<fieldset class="form-group col-md-6">
<div class="col">
<legend class="col-form-label col-md-6">NewsFrek </legend>
<div class="col-md-5">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1">
<label class="form-check-label" for="gridRadios1">
Every Week
</label>
</div>
<div class="form-check col">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Every month
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3">
<label class="form-check-label" for="gridRadios3">
Every year
</label>
</div>
</div>
</div>
</fieldset>
JavaScript
if(checkCheckBoxen.checked == true){
$(checkCheckBoxen).addClass('is-valid')
} else{
$(checkCheckBoxen).removeClass('is-valid')
$(checkCheckBoxen).addClass('is-invalid')
}
I actually don't know if this solves your problem because I am not sure if I understand it.
HTML:
<fieldset>
<div class="col">
<legend class="col-form-label col-md-6">NewsFrek </legend>
<div class="col-md-5">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1">
<label class="form-check-label" for="gridRadios1">
Every Week
</label>
</div>
<div class="form-check col">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Every month
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3">
<label class="form-check-label" for="gridRadios3">
Every year
</label>
</div>
</div>
</div>
</fieldset>
<a href='javascript:;' class="btn btn-primary ml-5 mt-2" onClick='test()'>Submit Me</>
Javascript:
test = () => {
$(".form-check-input").each(function(index, element) {
var $this = $(this);
if (this.checked) {
$(element).removeClass('is-invalid')
$(element).addClass('is-valid');
}else{
$(element).addClass('is-invalid')
}
});
}
Here's a codepen link!
function display() {
if(document.getElementById('GFG').checked) {
document.getElementById("disp").innerHTML
= document.getElementById("GFG").value
+ " radio button checked";
}
else if(document.getElementById('HTML').checked) {
document.getElementById("disp").innerHTML
= document.getElementById("HTML").value
+ " radio button checked";
}
else if(document.getElementById('JS').checked) {
document.getElementById("disp").innerHTML
= document.getElementById("JS").value
+ " radio button checked";
}
else {
document.getElementById("disp").innerHTML
= "No one selected";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>
How to check whether a radio button
is selected with JavaScript ?
</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Click on the button to check whether<br>
a radio button is sected or not
</h3>
<form>
<input type="radio" name="GFG" id="GFG"
value="GeeksforGeeks">GeeksforGeeks<br>
<input type="radio" name="GFG" id="HTML"
value="HTML">HTML<br>
<input type="radio" name="GFG" id="JS"
value="JavaScript">JavaScript<br><br>
<button type="button" onclick="display()">
Submit
</button>
</form>
<br>
<div id="disp" style=
"color:green; font-size:18px; font-weight:bold;">
</div>
</body>
</html>
form validation before submitting the form, you can modify as you need
I am trying to change the name of required when it is not selected and I did it. When I click "Send" without selecting it first, it will show an error, but when I selected it again but not the first radio button where I put the required syntax it still shows the same error that forced me to select the first radio button. Is there a way to make it right, please? Thank you for the help.
This is my code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form method="post" action="" id="form">
<div class="container">
<div class="intro-text left-0 text-left text-black p-4 rounded " style="background-color: #ffbe76">
<div class="section-heading-upper">
<p class="mb-3 lead">1. ......?
</p>
</div>
<div class="row ml-2">
<div class="col-auto">
<div class="form-group mx-auto option">
<h2 class="section-heading mb-2">
<span class="text-center section-heading-upper">Layanan</span>
</h2>
<div class="form-check">
<input class="form-check-input" type="radio" name="penting1" id="1penting1" value="100.00" required="" oninvalid="this.setCustomValidity('Pick one')" oninput="this.setCustomValidity('')">
<label class="form-check-label" for="exampleRadios1">
Sangat Penting
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="penting1" id="1penting2" value="81.25">
<label class="form-check-label" for="exampleRadios2">
Penting
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="penting1" id="1penting3" value="62.50">
<label class="form-check-label" for="exampleRadios3">
Tidak Penting
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="penting1" id="1penting4" value="43.75">
<label class="form-check-label" for="exampleRadios4">
Sangat Tidak Penting
</label>
</div>
</div>
</div>
<div class="col-auto">
<div class="form-group mx-auto option">
<h2 class="section-heading mb-2">
<span class="text-center section-heading-upper">Kepuasan Layanan</span>
</h2>
<div class="form-check">
<input class="form-check-input" type="radio" name="puas1" id="1puas1" value="100.00" required oninvalid="this.setCustomValidity('Pick one')" oninput="setCustomValidity('')">
<label class="form-check-label" for="exampleRadios1">
Sangat Puas
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="puas1" id="1puas2" value="81.25">
<label class="form-check-label" for="exampleRadios2">
Puas
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="puas1" id="1puas3" value="62.50">
<label class="form-check-label" for="exampleRadios3">
Tidak Puas
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="puas1" id="1puas4" value="43.75">
<label class="form-check-label" for="exampleRadios4">
Sangat Tidak Puas
</label>
</div>
</div>
</div>
</div>
<div class="text-center mt-2">
<input class="btn btn-primary btn-lg" value="Send" id="singlebutton" name="submit" type="submit" onclick="check()">
</div>
</form>
You can remove required attributes and test whether a specific one is checked using jQuery as follows:
if ($('input[name=penting1]:checked').length > 0) {
//selected
}
if ($('input[name=puas1]:checked').length > 0) {
//selected
}
it will work :)
I would like to stop a function so it can run multiple times on one page. It is some radio buttons which i would like to be cleared if a checkbox is clicked. It should work with an infinite number of products. I'm the worst on javascript so i hope i could get an answer?
Sample:
$('.product .question-input').change(function() {
if ($(this).is(':checked')) { //radio is now checked
$('.product .question-checkbox').prop('checked', false);
}
return false;
});
$('.product .question-checkbox').change(function() {
if ($(this).is(':checked')) {
$('.product .question-input').prop('checked', false);
}
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product">
<div class="form-inline justify-content-center">
<div class="container text-center">
<div class="product-title">Adobe</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">1
<input class="form-check-input question-input" type="radio" name="test-1" id="test-1" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">2
<input class="form-check-input question-input" type="radio" name="test-1" id="test-2" value="2"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">3
<input class="form-check-input question-input" type="radio" name="test-1" id="test-3" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">4
<input class="form-check-input question-input" type="radio" name="test-1" id="test-4" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">5
<input class="form-check-input question-input" type="radio" name="test-1" id="test-5" value="1"></label></div>
</div>
</div>
<div class="form-group form-check text-center the-checkbox">
<input type="checkbox" name="check-1" class="form-check-input question-checkbox" id="check-1">
<label class="form-check-label" for="check-1">I don't use this product for work</label>
</div>
</div>
</div>
<div class="product">
<div class="form-inline justify-content-center">
<div class="container text-center">
<div class="product-title">Mocups</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">1
<input class="form-check-input question-input" type="radio" name="test-2" id="test-1" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">2
<input class="form-check-input question-input" type="radio" name="test-2" id="test-2" value="2"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">3
<input class="form-check-input question-input" type="radio" name="test-2" id="test-3" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">4
<input class="form-check-input question-input" type="radio" name="test-2" id="test-4" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">5
<input class="form-check-input question-input" type="radio" name="test-2" id="test-5" value="1"></label></div>
</div>
</div>
<div class="form-group form-check text-center the-checkbox">
<input type="checkbox" name="check-1" class="form-check-input question-checkbox" id="check-1">
<label class="form-check-label" for="check-1">I don't use this product for work</label>
</div>
</div>
</div>
By passing a reference to a handler instead of directly passing the handler function:
function handler() {
if ($(this).is(':checked')) {
$('.product .question-input').prop('checked', false);
}
return false;
}
$('.product .question-input').change(handler);
$('.product .question-checkbox').change(handler);
You can not to this with the same class names for every group, you need to separate the classes in html and create functions for each of them like this:
$('.product1 .question-checkbox1').change(function() {
if ($(this).is(':checked')) {
$('.product1 .question-input1').prop('checked', false);
}
return false;
});
end then product2, product3...
Basically, I wanted to show/hide the div by clicking Yes/No Radio button. I have also done a sample types in the fiddle link below. I want to make this Generic, like one function can do for all the yes/no questions. and i want to avoid the multiple if condtion in jquery.
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="well well-sm">
<label class="control-label">1) Are you a Student??</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="student" id="studentYes" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="student" id="studentNo" value="no"> No
</label>
</div>
<div id="stdTypes" class="studentsType">
<label class="control-label">1.1) Are you a Graduate Student?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd1" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd2" value="no"> No
</label>
</div>
<div class="departName">
<label class="control-label">1.2) Please Enter your Department?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="well well-sm">
<label class="control-label">2) Are you earning for your living?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="living" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="living" value="no"> No
</label>
</div>
<div class="earning">
<label class="control-label">2.1) How much do you earn?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
My jquery look this.
$('input[name="student"]:radio').change(function () {
var radio_value = ($('input:radio[name="student"]:checked').val());
if (radio_value == 'yes') {
$('.studentsType').slideDown("fast");
}
else if (radio_value == 'no') {
$('.studentsType').slideUp("fast");
}
});
$('input[name="gradstd"]:radio').change(function () {
var radio_value = ($('input:radio[name="gradstd"]:checked').val());
if (radio_value == 'yes') {
$('.departName').slideDown("fast");
}
else if (radio_value == 'no') {
$('.departName').slideUp("fast");
}
});
$('input[name="living"]:radio').change(function () {
var radio_value = ($('input:radio[name="living"]:checked').val());
if (radio_value == 'yes') {
$('.earning').slideDown("fast");
}
else if (radio_value == 'no') {
$('.earning').slideUp("fast");
}
});
Links for Fiddle:
http://jsfiddle.net/mgrgfqfd/
Please help !!
You can use a data attribute in the radio buttons to indicate which DIV should be toggled.
$(':radio[data-rel]').change(function() {
var rel = $("." + $(this).data('rel'));
if ($(this).val() == 'yes') {
rel.slideDown();
} else {
rel.slideUp();
rel.find(":text,select").val("");
rel.find(":radio,:checkbox").prop("checked", false);
}
});
.studentsType,
.departName,
.earning {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="well well-sm">
<label class="control-label">1) Are you a Student??</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="student" id="studentYes" value="yes" data-rel="studentsType">Yes
</label>
<label class="radio-inline">
<input type="radio" name="student" id="studentNo" value="no" data-rel="studentsType">No
</label>
</div>
<div id="stdTypes" class="studentsType">
<label class="control-label">1.1) Are you a Graduate Student?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd1" value="yes" data-rel="departName">Yes
</label>
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd2" value="no" data-rel="departName">No
</label>
</div>
<div class="departName">
<label class="control-label">1.2) Please Enter your Department?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="well well-sm">
<label class="control-label">2) Are you earning for your living?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="living" value="yes" data-rel="earning">Yes
</label>
<label class="radio-inline">
<input type="radio" name="living" value="no" data-rel="earning">No
</label>
</div>
<div class="earning">
<label class="control-label">2.1) How much do you earn?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="panel-footer">Panel footer</div>
</div>
</div>
If you keep this sort of structure it can be achieved with a tiny bit of code:
http://jsfiddle.net/mgrgfqfd/2/
HTML:
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="well well-sm">
<label class="control-label">1) Are you a Student??</label>
<div class="control-group" data-target="gruduate">
<label class="radio-inline">
<input type="radio" name="student" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="student" value="no"> No
</label>
</div>
<div class="optional">
<label class="control-label">1.1) Are you a Graduate Student?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd1" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd2" value="no"> No
</label>
</div>
<div class="optional">
<label class="control-label">1.2) Please Enter your Department?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="well well-sm">
<label class="control-label">2) Are you earning for your living?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="living" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="living" value="no"> No
</label>
</div>
<div class="optional">
<label class="control-label">2.1) How much do you earn?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="panel-footer">Panel footer</div>
</div>
</div>
JS:
$('input:radio').on('change', function() {
$(this).parents('.control-group').next('div.optional').toggle( $(this).val() == 'yes' );
});
Just ensure that your yes/no buttons are within a control-group and you put the optional elements directly after it inside a div with a class of .optional
Below code will find next div and perform sliding in jquery this helps you to avoid multiple redundant lines of code and ifs.
$('input:radio').on('change', function () {//Register change event for all radio button
if ($(this).val() == 'yes') {//check value of selected radio is yes
$(this).parent().parent().next('div').slideDown("fast");
}
else if ($(this).val() == 'no') {//check value of selected radio is no
$(this).parent().parent().next('div').slideUp("fast");
}
});
So, I am using the jquery-calx to calculate the price of some items. I have a different price depending on the base choise and the quantity. If the user chooses a 100 peaces of a full color base the price is different from 100 pieces of a One Side Monochromatic pattern. This is all working in my code, but there is a thing; If I choose One Side Monochromatic and them 100 pieces, the price in Total area is ok, but if I change the base to Full Color, for example, the price doesn't update. In this case, if I click again in the quantity the price does update. I would like to know if it is possible to make that update smoothly. Maybe create a button to update, I don't know. Would appreciate the help! Below Follows my code:
<form class="form-horizontal" id="meishi" data-calx-identifier="CALX1452836013763">
<div class="form-group">
<label class="col-lg-1 topic text-left">Base</label>
<div class="col-lg-2">
<label class="radio-inline">
<input type="radio" name="design" data-cell="A1" value="10800">One Side Monochromatic
</label>
</div>
<div class="col-lg-3">
<label class="radio-inline">
<input type="radio" name="design" data-cell="B1" value="14040">One Side Color
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input type="radio" name="design" data-cell="C1" value="16200">Full Color
</label>
</div>
<div class="col-lg-2 col-lg-offset-2 text-right">
<label data-cell="F1" data-formula="SUM(A1:C1)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Quantity</label>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuA" type="radio" name="quantity" data-cell="A3" value="">100
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuB" type="radio" name="quantity" data-cell="B3" value="">200
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuC" type="radio" name="quantity" data-cell="C3" value="">300
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuD" type="radio" name="quantity" data-cell="D3" value="">400
</label>
</div>
<div class="col-lg-1">
<label class="radio-inline">
<input class="maisuuE" type="radio" name="quantity" data-cell="E3" value="">500
</label>
</div>
<div class="col-lg-2 text-right">
<label data-cell="F3" data-formula="SUM(A3:E3)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Total</label>
<div class="col-lg-3 text-right col-lg-offset-8">
<label data-cell="F6" data-format="$ 0,0" data-formula="SUM(F1:F5)">$ 0</label>
</div>
</div>
</form>
Script:
$('#meishi').calx();
$('input:radio[name="design"]').change(
function() {
if ($(this).is(':checked') && $(this).val() == '10800') {
$('.maisuuA').val('2160');
$('.maisuuB').val('2484');
$('.maisuuC').val('3132');
$('.maisuuD').val('2808');
$('.maisuuE').val('3456');
} else if ($(this).is(':checked') && $(this).val() == '14040') {
$('.maisuuA').val('2808');
$('.maisuuB').val('3132');
$('.maisuuC').val('3780');
$('.maisuuD').val('3456');
$('.maisuuE').val('4104');
} else if ($(this).is(':checked') && $(this).val() == '16200') {
$('.maisuuA').val('3240');
$('.maisuuB').val('3564');
$('.maisuuC').val('4212');
$('.maisuuD').val('3888');
$('.maisuuE').val('4536');
}
});
Thank you!
I've never used jquery-calx but it really isnt necessary for something like this. If it were me, I'd do it like this:
store an array of values on the design inputs
give all of the inputs a class of update
when a any input is changed, get the array from the selected design input and the index of the selected "maisuu" input tells us which value to use from that stored array
get the quantity from the value of the selected "maisuu" elemet
do your math and set the total
Like this:
*Note that you may need to tweak the math, not 100% sure the calculations are what you intended. Also, if you insist, I'm sure you could merge this technique with the use of jquery-calx
Here's a jsFiddle with comments explaining the code
$('.update').change(function() {
var $design = $('input[name="design"]:checked');
var $maisuu = $('input.maisuu:checked');
var curMaisuu =$('.maisuu').index($maisuu);
var maisuuArr =$.map($design.data('values').split(','), function(e, i) {
return Number(e);
});
var base = $design.val() * 1000;
var upcharge = maisuuArr[curMaisuu] * 1000
var qty = $maisuu.val();
var cost = ((base + upcharge)* qty ) / 1000
if (base && qty) $('#total').text('$' + cost.toFixed(2))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class="form-horizontal" id="meishi" data-calx-identifier="CALX1452836013763">
<div class="form-group">
<label class="col-lg-1 topic text-left">Base</label>
<div class="col-lg-2">
<label class="radio-inline">
<input class="update" type="radio" name="design" data-cell="A1" value="108.00" data-values="21.60,24.84,31.32,28.08,34.56">One Side Monochromatic
</label>
</div>
<div class="col-lg-3">
<label class="radio-inline">
<input class="update" type="radio" name="design" data-cell="B1" value="140.40" data-values="28.08,31.32,37.80,34.56,41.04">One Side Color
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="update" type="radio" name="design" data-cell="C1" value="162.00" data-values="32.40,35.64,42.12,38.88,45.36">Full Color
</label>
</div>
<div class="col-lg-2 col-lg-offset-2 text-right">
<label data-cell="F1" data-formula="SUM(A1:C1)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Quantity</label>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="A3" value="100">100
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="B3" value="200">200
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="C3" value="300">300
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="D3" value="400">400
</label>
</div>
<div class="col-lg-1">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="E3" value="500">500
</label>
</div>
<div class="col-lg-2 text-right">
<label data-cell="F3" data-formula="SUM(A3:E3)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Total</label>
<div class="col-lg-3 text-right col-lg-offset-8">
<label id="total">$ 0</label>
</div>
</div>
</form>