We are currently modifying the code that changes the amount according to each option.
However, I would like to modify the ‘value’ of option 2 and ‘value’ of option 3 to change according to option 1.
For example, if option 1-1 is selected, the amount of 2-2 is -1, but if option 1-2 is selected, the amount of 2-2 is -2.
I would like the amount of the final TOTAL to be revised according to the revised value value.
$('.form-item input').on('change', function() {
// addition and subtraction here
var $this;
var sum = 0;
$('.form-item input').each(function() {
$this = $(this);
if ($this[0].checked == true) {
sum += parseInt($this.val());
}
$('.total span').html(sum.toLocaleString('en-US'));
})
});.form-wrap {
display: block;
margin: 0 auto;
width: 480px;
}
.form-text {
text-align: left;
font-size: 20px;
font-weight: 400;
line-height: 1.3;
margin-bottom: 15px;
color: #bbb;
padding: 0 5px;
}
#fm-title {
color: #444;
font-weight: 600;
}
#op-title {
font-weight: 600;
font-size: 20px;
color: #444;
}
.form-item {
margin-bottom: 5px;
}
.form-item input[type=radio] {
display: none;
}
.form-type-radio {
text-align: center;
margin-bottom: 35px;
}
.form-item input[type=radio]+label {
display: inline-block;
cursor: pointer;
height: 115px;
width: 480px;
border: 2px solid #ddd;
line-height: 1.5;
text-align: left;
font-weight: 400;
font-size: 16px;
padding: 26px 45px;
border-radius: 20px;
}
.form-item input[type=radio]+label {
background-color: #fff;
color: #bbb;
font-weight: 400;
}
.form-item input[type=radio]:checked+label {
background-color: #fff;
color: #bbb;
border-color: #444;
}
.total {
font-size: 22px;
font-weight: 600;
height: 65px;
padding: 15px 15px;
text-align: center;
color: #555;
}
#bm-text {
font-size: 18px;
width: 100%;
font-weight: 400;
color: #555;
padding: 0 5px;
margin-bottom: 40px;
}
#bm-text p {
margin-bottom: 20px;
}
@media (max-width: 991px) {
.form-wrap {
width: 100%;
}
.form-item input[type=radio]+label {
width: 100%;
height: 70px;
line-height: 1.4;
padding: 17px 25px;
font-size: 12px;
border: 1px solid #ddd;
}
.form-text {
font-size: 14px;
margin-bottom: 10px;
}
#op-title {
font-size: 13px;
}
.form-item {
margin-bottom: 1px;
}
.form-type-radio {
margin-bottom: 20px;
}
.total {
font-size: 17px;
font-weight: 500;
padding: 10px 10px;
color: #444;
}
#bm-text {
font-size: 12px;
margin-bottom: 20px;
}
#bm-text p {
margin-bottom: 15px;
}
}<div class="form-wrap">
<div class="form-type-radio">
<div class="form-text">OPTION 1</div>
<div class="form-item">
<input type="radio" id="radio-1" name="samename" value="1800000" class="form-radio" checked="checked">
<label class="option" for="radio-1"><span id="op-title">1-1</span></label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="samename" value="2500000" class="form-radio">
<label class="option" for="radio-2"><span id="op-title">1-2</span></label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="samename" value="6000000" class="form-radio">
<label class="option" for="radio-3"><span id="op-title">1-3</span></label>
</div>
</div>
<div class="form-type-radio">
<div class="form-text">OPTION 2</div>
<div class="form-item">
<input type="radio" id="radio-4" name="samename1" value="0" class="form-radio" checked="checked">
<label class="option" for="radio-4"><span id="op-title">2-1</span></label>
</div>
<div class="form-item">
<input type="radio" id="radio-5" name="samename1" value="-700000" class="form-radio">
<label class="option" for="radio-5"><span id="op-title">2-2</span></label>
</div>
</div>
<div class="form-type-radio">
<div class="form-text">OPTION 3</div>
<div class="form-item">
<input type="radio" id="radio-6" name="samename2" value="0" class="form-radio" checked="checked">
<label class="option" for="radio-6"><span id="op-title">3-1</span></label>
</div>
<div class="form-item">
<input type="radio" id="radio-7" name="samename2" value="2000000" class="form-radio">
<label class="option" for="radio-7"><span id="op-title">3-2</span></label>
</div>
<div class="form-item">
<input type="radio" id="radio-8" name="samename2" value="-1300000" class="form-radio">
<label class="option" for="radio-8"><span id="op-title">3-3</span></label>
</div>
<div class="form-item">
<input type="radio" id="radio-9" name="samename2" value="-600000" class="form-radio">
<label class="option" for="radio-9"><span id="op-title">3-4</span></label>
</div>
</div>
<div class="form-type-radio">
<div class="form-text">OPTION 4</div>
<div class="form-item">
<input type="radio" id="radio-10" name="samename3" value="0" class="form-radio" checked="checked">
<label class="option" for="radio-10"><span id="op-title">4-1</span></label>
</div>
<div class="form-item">
<input type="radio" id="radio-11" name="samename3" value="100000" class="form-radio">
<label class="option" for="radio-11"><span id="op-title">4-2</span></label>
</div>
<div class="form-item">
<input type="radio" id="radio-12" name="samename3" value="300000" class="form-radio">
<label class="option" for="radio-12"><span id="op-title">4-3</span></label>
</div>
</div>
<div class="form-type-radio">
<div class="form-text">OPTION 5</div>
<div class="form-item">
<input type="radio" id="radio-13" name="samename4" value="0" class="form-radio" checked="checked">
<label class="option" for="radio-13"><span id="op-title">5-1</span></label>
</div>
<div class="form-item">
<input type="radio" id="radio-14" name="samename4" value="300000" class="form-radio">
<label class="option" for="radio-14"><span id="op-title">5-2</span></label>
</div>
</div>
<div class="total">TOTAL <span>0</span></div>
</div>