重置/取消选中复选框如何重置 jquery 中的值？
[英]reset/uncheck checkbox how to reset value in jquery?
问题描述
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.
我正在尝试使用包含 4 个元素 AB C D（每个值 = 1）和一个元素 E（值 = 3）的清单来创建“折扣”，如果用户选择它。 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...该值用作乘数以根据其他选定的标准创建报价。所以我需要将其设为 A+B+C+D=4 但如果我按 E 他们都取消选中并且值变为 3.. 但是.. .
With the function I managed to uncheck the boxes but seems like the value won't reset?使用 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); } } $('#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 个解决方案
解决方案1
0 2021-02-18 14:03:45
I would move your click event for E out of your function and do it like this:我会将E的点击事件移出 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()
});
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() {我也从<input id="family" name="type" value="3" type="checkbox" id="p5"/>你的click事件中得到了，因为它会触发 2 次，因为你有$('#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>
解决方案2
0 已采纳 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.为了实现这一点，您可以在所有元素上放置公共类，并使用一个额外的 class 来识别“家庭”选项。 From there you can detect which checkbox was checked.从那里您可以检测到哪个复选框被选中。 If 'family' is checked, uncheck the others and set multiplier = 3 .如果选中了“family”，则取消选中其他并设置multiplier = 3 。 Otherwise, set multiplier equal to the number of checked boxes.否则，将multiplier设置为等于选中框的数量。
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.此外，如果您将标签设置为display: block ，则无需在标签中手动添加<br />标签。
Finally, note the use of unobtrusive event handlers in the above example, instead of the outdated on attributes in the HTML.最后，请注意上面示例中使用了不显眼的事件处理程序，而不是 HTML 中过时on属性。
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>
解决方案3
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.