重置/取消选中复选框如何重置 jquery 中的值？
[英]reset/uncheck checkbox how to reset value in jquery?
问题描述
我正在尝试使用包含 4 个元素 AB C D（每个值 = 1）和一个元素 E（值 = 3）的清单来创建“折扣”，如果用户选择它。 该值用作乘数以根据其他选定的标准创建报价。所以我需要将其设为 A+B+C+D=4 但如果我按 E 他们都取消选中并且值变为 3.. 但是.. .
使用 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
我会将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()
});
演示
我也从<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
为了实现这一点，您可以在所有元素上放置公共类，并使用一个额外的 class 来识别“家庭”选项。 从那里您可以检测到哪个复选框被选中。 如果选中了“family”，则取消选中其他并设置multiplier = 3 。 否则，将multiplier设置为等于选中框的数量。
此外，如果您将标签设置为display: block ，则无需在标签中手动添加<br />标签。
最后，请注意上面示例中使用了不显眼的事件处理程序，而不是 HTML 中过时on属性。
说了这么多，试试这个：
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
我刚刚整理了您的代码，您的代码中也有一些问题，请看一下。
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>
在复选框中未选中的jQuery中重置文本框值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.