JSFiddle - React, Tailwind, and code Playground
HTML
<div id="radios">
Build your own package
<input type="radio" name="radio" value="1"><br /><br />
Main Package - Checkbox A,B,C
<input type="radio" name="radio" value="2"><br /><br />
Complete Package - ALL SELECTED
<input type="radio" name="radio" value="3"><br /><br />
</div>
<div id="boxes">
<input type="checkbox" name="checkboxes[]" value="1">
<input type="checkbox" name="checkboxes[]" value="2">
<input type="checkbox" name="checkboxes[]" value="3">
<input type="checkbox" name="checkboxes[]" value="4">
<input type="checkbox" name="checkboxes[]" value="5">
</div>
<div id="valuefield">
<br />Reflective Cost
<input type="text" name="valuetext" id="input_53_34">
JavaScript
$('input[type=radio]').click(function(){
console.log(typeof this.value);
$('input[type="checkbox"]').prop('checked',false);
switch(this.value) {
case "2":
$('input[type=checkbox]:nth-child(1), input[type=checkbox]:nth-child(2),input[type=checkbox]:nth-child(3)').prop('checked',true);
break;
case "3":
$('input[type=checkbox]').prop('checked',true);
break;
}
});
$('input[type=checkbox]').click(function(){
var count = $('input[type=checkbox]:checked').length;
console.log(count);
$('input[type=radio]').prop('checked',false);
switch(count) {
case 1:
case 2:
$('input[type=radio][value=1]').prop('checked',true);
break;
case 3:
$('input[type=radio][value=2]').prop('checked',true);
break;
case 4:
$('input[type=radio][value=1]').prop('checked',true);
break;
case 5:
$('input[type=radio][value=3]').prop('checked',true);
break;
}
});
jQuery(document).ready(function($){$('input[type="checkbox"]').on('change', function() {
if($('input[type="checkbox"]:lt(5):checked').length == 1) {
greeting = "50";
} else if ($('input[type="checkbox"]:lt(5):checked').length == 2) {
greeting = "100";
} else if ($('input[type="checkbox"]:lt(5):checked').length == 3) {
greeting = "125";
} else if ($('input[type="checkbox"]:lt(5):checked').length == 4) {
greeting = "155";
} else if ($('input[type="checkbox"]:lt(5):checked').length == 5) {
greeting = "170";
};
document.getElementById("input_53_34").value = greeting;
});
});