I am trying to have a checklist with 4 elements A B C D (value=1 each) and an element E (value=3) to create a "discount" if the user selects this. The value is used as multiplier to create a quote based on other selected criteria.. So I need this to be A+B+C+D=4 but if I press E they all uncheck and the value becomes 3.. however...
With the function I managed to uncheck the boxes but seems like the value won't reset?
function totalIt() {
var input = document.getElementsByName("type");
var multiplier = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
multiplier += parseFloat(input[i].value);
}
}
$('#family').on('click', function() {
$('.font').not(this).removeAttr('checked')
var multiplier = 3;
});
console.log(multiplier)
};<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="scroll.js"></script>
<style>
.column2{
display: flex;
flex-wrap: wrap;
}
.theForm{
width: 30%;}
</style>
</head>
<!-- BODY -->
<body>
<form action="" class="theForm">
<fieldset>
<legend>
SELECT
</legend>
<label><br>
<input class="font"name="type" value="1" type="checkbox" id="p1" onclick="totalIt()"/>
Thin
</label>
<label><br>
<input class="font"name="type" value="1" type="checkbox" id="p2" onclick="totalIt()"/>
Regular
</label>
<label><br>
<input class="font"name="type" value="1" type="checkbox" id="p3" onclick="totalIt()"/>
Medium
</label>
<label><br>
<input class="font"name="type" value="1" type="checkbox" id="p4" onclick="totalIt()"/>
Bold
</label>
<label><br>
<input id="family" name="type" value="3" type="checkbox" id="p5" onclick="totalIt()"/>
Family
</label>
</fieldset>
</form>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire