gpt4 book ai didi

javascript - 验证复选框

转载 作者:行者123 更新时间:2023-11-30 12:51:07 26 4
gpt4 key购买 nike

大家好:我最近偶然发现了一个关于表单验证的问题,我目前正在努力解决这个问题。我从答案中获得了代码,然后根据我的需要对其进行了自定义。:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function Validate(){
if(!validateForm()){
alert("Something happened");
return false;
}
return true
}
function validateForm()
{
var c=document.getElementsByTagName('input');
for (var i = 0; i<c.length; i++){
if (c[i].type=='checkbox')
{
if (c[i].checked){return true}
}
}
return false;
}
</script>
</head>
<body>
<form name="myForm" action="http://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" onsubmit="return Validate()" method="get">
<input type="checkbox" name="live" value="yesno">You are alive.
<br>
<input type="checkbox" name="type" value="person">You are a person.
<br>
<input type="checkbox" name="eyes" value="color">Your eyes have color.
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

注意:该图片仅来自 Google 图片搜索,位于维基百科(我不拥有它)。

现在,当我最初将答案中的 HTML 输入 W3 Schools 的 Tryit 编辑器时,它会给我一个“发生了一些事情”的警告,或者什么都不做。 (我认为这是应该做的)。尽管如此,(现在我有自己的问题)如果没有选择任何东西,它会说“发生了一些事情”,但无论检查多少次(超过 1 次检查)它只会给我图像。基本上,我想要的是检查是否检查了 ALL 或 ONLY SOME。如果所有都被选中,我想要一张图片,如果只有一些,我想要一张不同的图片。我希望这不会太困惑,感谢任何帮助:)

P.S.:这是我从哪里得到代码的问题:Original Question

最佳答案

在脚本部分试试这个,它会在验证选中了多少复选框后更改表单的“action”属性(提交时将表单指向所需的 URL):

<script type="text/javascript">
function Validate(formRef){
var checkboxes = getCheckboxes(formRef);
var checkedCount = validateForm(checkboxes);
if(checkedCount == checkboxes.length){
// All are checked!
return true;
} else if(checkedCount > 0) {
// A few are checked!
formRef.setAttribute('action', 'http://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Yahoo!_logo.svg/200px-Yahoo!_logo.svg.png');
return true;
} else {
alert("Something happened");
}
return true;
}

function getCheckboxes(formRef) {
var c = formRef.getElementsByTagName('input');
var checkboxes = [];
for (var i = 0; i<c.length; i++){
if (c[i].type == 'checkbox')
{
checkboxes.push(c[i]);
}
}
return checkboxes;
}

function validateForm(checkboxes) {
var checkedCount = 0;
for (var i = 0; i < checkboxes.length; i++){
if (checkboxes[i].checked){
checkedCount++;
}
}
return checkedCount;
}
</script>

应该更新表单 HTML 以将“this”(对正在验证的表单对象的引用)传递到 Validate() 函数中,以避免再次查询它:

<form name="myForm" action="http://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" onsubmit="return Validate(this)" method="get">

关于javascript - 验证复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20927988/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com