问题描述
我正在尝试使用包含 4 个元素 A B C D(每个值 = 1)和一个元素 E(值 = 3)的清单来创建“折扣”,如果用户选择此选项。该值用作乘数以根据其他选定的条件创建报价.. 所以我需要这是 A+B+C+D=4 但如果我按 E 他们都取消选中并且值变为 3.. 但是.. .
使用该功能,我设法取消选中复选框,但似乎该值不会重置?
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>
解决方法
我会将 E
的点击事件移出您的函数并按以下方式操作:
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()
});
演示
我还从您的 click
事件中获得了 <input id="family" name="type" value="3" type="checkbox" id="p5"/>
,因为它会触发 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>
要实现这一点,您可以将通用类放在所有元素上,并使用一个附加类来标识“系列”选项。从那里你可以检测哪个复选框被选中。如果选中了“family”,则取消选中其他的并设置 multiplier = 3
。否则,设置 multiplier
等于选中框的数量。
此外,如果您在 CSS 中将 <br />
标签设置为 display: block
,则无需在标签中手动添加。
最后,请注意上面示例中使用不显眼的事件处理程序,而不是 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>
我刚刚整理了您的代码,您的代码也有问题,请查看。
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>