选中复选框时的if语句?
If statement when checkbox is checked?
这里有一个小问题,我正在尝试执行一个巨大的计算,该计算将在一个值范围内随机确定一些东西。我希望用户自己确定这个范围,让他选择是要添加最大值还是最小值。基本上,现在一切正常,但我试图在开头放置一个 "if" 语句来检查复选框是否被选中,以提示正确的问题。问题是,我现在编写它的方式使得无法阅读该程序:它什么都不做。显示的错误消息是:
Uncaught TypeError: Cannot read property 'checked' of null(…).
我尝试了一些东西,当我自己设置值时,它起作用了,所以问题确实是 "if" 语句。这是我的全局变量和不起作用的部分:
var maxdesiredvalue, mindesiredvalue;
if (document.getElementById("min").checked == false) {
mindesiredvalue = 0.00
}
else {
mindesiredvalue = window.prompt("Valeur minimale désirée:");
mindesiredvalue = parseInt(mindesiredvalue)}
if (document.getElementById("max").checked == false) {
maxdesiredvalue = 9999999.99
}
else {
maxdesiredvalue = window.prompt("Valeur maximale désirée:");
maxdesiredvalue = parseInt(maxdesiredvalue)}
function RandWeap() {
/*Huge function here determining a value and repeating until it
is between mindesiredvalue and maxdesiredvalue*/
}
复选框是这样写的:
<body>
<form>
<i> Press F5 to clear or to get 1 random weapon </i> <br> <br>
Min price: <input type="checkbox" id="min"> <br>
Max price: <input type="checkbox" id="max"> <br> <br>
<button type="button" onclick="RandWeap()">Add a random weapon to list</button>
</form>
</body>
知道如何让它工作吗?
谢谢!
编辑
好吧,基本上如果我们能给出一个类似但真正简化的例子,它看起来像这样:
<html>
<meta charset="utf-8">
<script type="text/javascript" language="JavaScript">
var desiredResult;
desiredResult = (parseInt(window.prompt("Valeur désirée")))
function dice(){
var result, missed;
result = (Math.floor(Math.random() * 6) + 1)
if (desiredResult == result) {document.body.innerHTML += result}
else if (desiredResult != result) {dice()}
}
window.onload = dice
</script>
<body>
Choose value: <input type="checkbox" id="choose"> <br> <br>
<button type="button" onclick="dice()">Roll dice!</button>
</body>
</html>
所以我们提示一个想要的值,然后重复这个函数,直到它是我们想要的值。现在,应该对这段代码进行哪些编辑才能让它仅在复选框被选中时提示所需的值?所以,onload,当然不会检查,所以只会输入随机值。然后,当我们点击一个按钮时,它会重复这个步骤,但是如果我们刚才勾选了复选框,它会提示需要的值。我不确定它是否清楚......但基本上这就是我想知道的。如果有人知道我需要添加的代码,那就太好了!
您可以像 onclick
一样使用 event
。
纯 javascript 使用点击的示例 event
:
var isCheckedWithGlobalVariable = false;
document.getElementById('myInput').onclick = function() {
if (this.checked == true) {
// the element is checked
isCheckedWithGlobalVariable = true;
}
};
也许您需要在多个元素上使用它,因此您可以将 querySelectorAll
与 for
一起使用。
示例:
var isCheckedWithGlobalVariable = false;
var elements = document.querySelectorAll('input[type=checkbox]');
for (var i = 0; i < elements.lenght; i++) {
elements[i].onclick = function() {
if (this.checked == true) {
// checked
isCheckedWithGlobalVariable = true;
}
};
}
在 jQuery 上,您可以将 :checked
选择器与 click
事件一起使用:
var isCheckedWithGlobalVariable = false;
$('#myInput').click(function() {
if ($(this).is(':checked')) {
// checked
isCheckedWithGlobalVariable = true;
}
})
或
var isCheckedWithGlobalVariable = false;
$('#myInput:checked').click(function() {
// only if it is checked
isCheckedWithGlobalVariable = true;
})
或具有多个元素:
var isCheckedWithGlobalVariable = false;
$('input').click(function() {
if ($(this).is(':checked')) {
// this element is checked
isCheckedWithGlobalVariable = true;
}
})
我假设您的脚本是在您的头部或正文顶部内联的?如果是这样,问题是脚本运行时您的复选框不存在。
假设您想在用户单击按钮时进行提示,在这种情况下您应该执行以下操作:
a) 将您的主要 "get min/max" 代码包装在一个函数中,然后
b) 在您的按钮点击中调用该函数。
像这样:
var maxdesiredvalue, mindesiredvalue;
function getMinMax() {
if (document.getElementById("min").checked == false) {
mindesiredvalue = 0.00
} else {
mindesiredvalue = window.prompt("Valeur minimale désirée:");
mindesiredvalue = parseInt(mindesiredvalue)
}
if (document.getElementById("max").checked == false) {
maxdesiredvalue = 9999999.99
} else {
maxdesiredvalue = window.prompt("Valeur maximale désirée:");
maxdesiredvalue = parseInt(maxdesiredvalue)
}
}
function RandWeap() {
getMinMax();
alert("Min: " + mindesiredvalue + " Max: " + maxdesiredvalue);
//Huge function here determining a value and repeating until it
//is between mindesiredvalue and maxdesiredvalue
}
还有更优雅的解决方案,但这是它的本质。
JS Fiddle 这里:https://jsfiddle.net/ebwxcvg9/
这里有一个小问题,我正在尝试执行一个巨大的计算,该计算将在一个值范围内随机确定一些东西。我希望用户自己确定这个范围,让他选择是要添加最大值还是最小值。基本上,现在一切正常,但我试图在开头放置一个 "if" 语句来检查复选框是否被选中,以提示正确的问题。问题是,我现在编写它的方式使得无法阅读该程序:它什么都不做。显示的错误消息是:
Uncaught TypeError: Cannot read property 'checked' of null(…).
我尝试了一些东西,当我自己设置值时,它起作用了,所以问题确实是 "if" 语句。这是我的全局变量和不起作用的部分:
var maxdesiredvalue, mindesiredvalue;
if (document.getElementById("min").checked == false) {
mindesiredvalue = 0.00
}
else {
mindesiredvalue = window.prompt("Valeur minimale désirée:");
mindesiredvalue = parseInt(mindesiredvalue)}
if (document.getElementById("max").checked == false) {
maxdesiredvalue = 9999999.99
}
else {
maxdesiredvalue = window.prompt("Valeur maximale désirée:");
maxdesiredvalue = parseInt(maxdesiredvalue)}
function RandWeap() {
/*Huge function here determining a value and repeating until it
is between mindesiredvalue and maxdesiredvalue*/
}
复选框是这样写的:
<body>
<form>
<i> Press F5 to clear or to get 1 random weapon </i> <br> <br>
Min price: <input type="checkbox" id="min"> <br>
Max price: <input type="checkbox" id="max"> <br> <br>
<button type="button" onclick="RandWeap()">Add a random weapon to list</button>
</form>
</body>
知道如何让它工作吗?
谢谢!
编辑
好吧,基本上如果我们能给出一个类似但真正简化的例子,它看起来像这样:
<html>
<meta charset="utf-8">
<script type="text/javascript" language="JavaScript">
var desiredResult;
desiredResult = (parseInt(window.prompt("Valeur désirée")))
function dice(){
var result, missed;
result = (Math.floor(Math.random() * 6) + 1)
if (desiredResult == result) {document.body.innerHTML += result}
else if (desiredResult != result) {dice()}
}
window.onload = dice
</script>
<body>
Choose value: <input type="checkbox" id="choose"> <br> <br>
<button type="button" onclick="dice()">Roll dice!</button>
</body>
</html>
所以我们提示一个想要的值,然后重复这个函数,直到它是我们想要的值。现在,应该对这段代码进行哪些编辑才能让它仅在复选框被选中时提示所需的值?所以,onload,当然不会检查,所以只会输入随机值。然后,当我们点击一个按钮时,它会重复这个步骤,但是如果我们刚才勾选了复选框,它会提示需要的值。我不确定它是否清楚......但基本上这就是我想知道的。如果有人知道我需要添加的代码,那就太好了!
您可以像 onclick
一样使用 event
。
纯 javascript 使用点击的示例 event
:
var isCheckedWithGlobalVariable = false;
document.getElementById('myInput').onclick = function() {
if (this.checked == true) {
// the element is checked
isCheckedWithGlobalVariable = true;
}
};
也许您需要在多个元素上使用它,因此您可以将 querySelectorAll
与 for
一起使用。
示例:
var isCheckedWithGlobalVariable = false;
var elements = document.querySelectorAll('input[type=checkbox]');
for (var i = 0; i < elements.lenght; i++) {
elements[i].onclick = function() {
if (this.checked == true) {
// checked
isCheckedWithGlobalVariable = true;
}
};
}
在 jQuery 上,您可以将 :checked
选择器与 click
事件一起使用:
var isCheckedWithGlobalVariable = false;
$('#myInput').click(function() {
if ($(this).is(':checked')) {
// checked
isCheckedWithGlobalVariable = true;
}
})
或
var isCheckedWithGlobalVariable = false;
$('#myInput:checked').click(function() {
// only if it is checked
isCheckedWithGlobalVariable = true;
})
或具有多个元素:
var isCheckedWithGlobalVariable = false;
$('input').click(function() {
if ($(this).is(':checked')) {
// this element is checked
isCheckedWithGlobalVariable = true;
}
})
我假设您的脚本是在您的头部或正文顶部内联的?如果是这样,问题是脚本运行时您的复选框不存在。
假设您想在用户单击按钮时进行提示,在这种情况下您应该执行以下操作:
a) 将您的主要 "get min/max" 代码包装在一个函数中,然后 b) 在您的按钮点击中调用该函数。
像这样:
var maxdesiredvalue, mindesiredvalue;
function getMinMax() {
if (document.getElementById("min").checked == false) {
mindesiredvalue = 0.00
} else {
mindesiredvalue = window.prompt("Valeur minimale désirée:");
mindesiredvalue = parseInt(mindesiredvalue)
}
if (document.getElementById("max").checked == false) {
maxdesiredvalue = 9999999.99
} else {
maxdesiredvalue = window.prompt("Valeur maximale désirée:");
maxdesiredvalue = parseInt(maxdesiredvalue)
}
}
function RandWeap() {
getMinMax();
alert("Min: " + mindesiredvalue + " Max: " + maxdesiredvalue);
//Huge function here determining a value and repeating until it
//is between mindesiredvalue and maxdesiredvalue
}
还有更优雅的解决方案,但这是它的本质。
JS Fiddle 这里:https://jsfiddle.net/ebwxcvg9/