reset/uncheck checkbox how to reset value in jquery?
Question
I am trying to have a checklist with 4 elements AB 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>
3 answers
solution1
0 2021-02-18 14:03:45
I would move your click event for E out of your function and do it like this:
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);
}
}
console.log(multiplier)
};
$('#family').on('click', function() {
$('.font').not(this).removeAttr('checked')
totalIt()
});
demo
Also I've from your click event from <input id="family" name="type" value="3" type="checkbox" id="p5"/> since it would fire 2 times since you have $('#family').on('click', function() {
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); } } console.log(multiplier) }; $('#family').on('click', function() { $('.font').not(this).removeAttr('checked') totalIt() });
<: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"/> Family </label> </fieldset> </form> </body> </html>
solution2
0 ACCPTED 2021-02-18 14:06:22
To achieve this you can put common classes on all the elements, with one additional class to identify the 'family' option. From there you can detect which checkbox was checked. If 'family' is checked, uncheck the others and set multiplier = 3 . Otherwise, set multiplier equal to the number of checked boxes.
In addition you can remove the need to manually add <br /> tags in the labels if you set them to display: block in your CSS.
Finally, note the use of unobtrusive event handlers in the above example, instead of the outdated on attributes in the HTML.
With all that said, try this:
let $fonts = $('.font').on('change', e => { let multiplier = 0; if ($(e.target).is('.font-family')) { $fonts.not(e.target).prop('checked', false); multiplier = 3; } else { $('.font-family').prop('checked', false); multiplier = $('.font:checked').length; } console.log(multiplier); });
.column2 { display: flex; flex-wrap: wrap; }.theForm { width: 30%; }.theForm label { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <form action="" class="theForm"> <fieldset> <legend> SELECT </legend> <label> <input class="font" name="type" value="1" type="checkbox" /> Thin </label> <label> <input class="font" name="type" value="1" type="checkbox" /> Regular </label> <label> <input class="font" name="type" value="1" type="checkbox" /> Medium </label> <label> <input class="font" name="type" value="1" type="checkbox" /> Bold </label> <label> <input class="font font-family" name="type" value="3" type="checkbox" /> Family </label> </fieldset> </form>
solution3
0 2021-02-18 14:09:52
I just arranged your code also there is some issue in your code please take a look.
var multiplier = 0; function totalIt() { if($('#family')[0].checked) $('#family').removeAttr('checked'); multiplier = 0; var input = document.getElementsByName("type"); for (var i = 0; i < input.length; i++) { if (input[i].checked) { multiplier += parseFloat(input[i].value); } } console.log(multiplier) } $(document).ready(function(){ $('#family').on('click', function() { $('.font').not(this).removeAttr('checked'); 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"/> Family </label> </fieldset> </form> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.