重置/取消選中復選框如何重置 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.