表单验证 - 带有 Javascript 的复选框

Form Validation - check box with Javascript

本文关键字：复选框 Javascript 带有 验证 表单      更新时间：2023-09-26

当用户单击"确认"复选框时，我正在尝试验证一些信息。问题是这是从 Access 数据库拉入的数据，因此表单字段 ID 具有变量。这是我用来触发事件的复选框：

<INPUT TYPE="checkbox" id="checkconfirm<%=j%>" NAME="confirm<%=j%>" align="center" value="Yes" onclick="ConfirmBoxChecked(this.form.confirm<%=j%>.name,this.form.confirmYear<%=j%>.value,this.form.confirmStatus<%=j%>.value)">

其中 j 是从访问数据库中提取的每条记录（因此第一个记录复选框是 checkconfirm1，第二个记录 checkconfirm2，依此类推）。

确认年份和确认状态是我正在检查的两条数据。

我的javascript点击函数是这样的：

function ConfirmBoxChecked(confirmbox, yearz, statuz) {
    var datecheck = new Date;
    //alert("Working! " + yearz + " working " + confirmbox + " working " + statuz + " working " + datecheck.getFullYear() + " working ");
    var boxname = "''" + confirmbox + "''"
    alert(boxname);
    if (statuz=="P" && (yearz < datecheck.getFullYear())) {
        alert("This fleet was delivered in " + yearz + " but is still listed as 'Potential Order'.  Please edit the year or status of these vehicles.");
        document.getElementByID(boxname).checked=false;
    }
    if (statuz=="O" && (yearz < datecheck.getFullYear())) {
        alert("This fleet was delivered in " + yearz + " but is still listed as 'On Order'. Please edit the year or status of these vehicles.");
        return false; 
    }
    if (statuz=="A" && yearz > datecheck.getFullYear() - 1) {
       alert("You have entered vehicles with status=''Active'', but with a model year of " + yearz + ". Your responses should reflect the status of these vehicles on 1/1/" + daty.getFullYear() + ".'nVehicles being delivered in " + daty.getFullYear() + " or in later years should be ''On Order'' or ''Potential'' based on the contract status. Please correct the year or status of these vehicles.");
        return false; 
    }
}

在我看来，验证工作正常 - IF 正确触发后的警报。但是我希望在警报触发后取消选中该复选框。我不知道该怎么做。

好的，这是修复它的方法。我没有拉过名字，而是拉过元素。所以输入代码看起来像：

<INPUT TYPE="checkbox" id="checkconfirm<%=j%>" NAME="confirm<%=j%>" align="center" value="Yes" onClick="ConfirmBoxChecked(this,this.form.confirmYear<%=j%>.value,this.form.confirmStatus<%=j%>.value)">

然后函数代码如下所示：

function ConfirmBoxChecked(confirmbox, yearz, statuz) {
var datecheck = new Date;
//alert("Working! " + yearz + " working " + confirmbox + " working " + statuz + " working " + datecheck.getFullYear() + " working ");
//var boxname = "'"" + confirmbox + "'""
//alert(boxname);
            if (statuz=="P" && (yearz < datecheck.getFullYear())) {
                alert("This fleet was delivered in " + yearz + " but is still listed as 'Potential Order'.  You must edit the year or status of these vehicles before you can confirm.");
                confirmbox.checked = false; }
            if (statuz=="O" && (yearz < datecheck.getFullYear())) {
                alert("This fleet was delivered in " + yearz + " but is still listed as 'On Order'. You must edit the year or status of these vehicles before you can confirm.");
                confirmbox.checked = false;  }
            if (statuz=="A" && yearz > datecheck.getFullYear() - 1) {
                alert("You have entered vehicles with status=''Active'', but with a model year of " + yearz + ". Your responses should reflect the status of these vehicles on 1/1/" + daty.getFullYear() + ".'nVehicles being delivered in " + daty.getFullYear() + " or in later years should be ''On Order'' or ''Potential'' based on the contract status. Please correct the year or status of these vehicles.");
                confirmbox.checked = false;  }
}

它有效！

您将复选框的 name 属性作为函数中的 confirmbox 参数传递。然后在您的代码中调用 getElementById(confirmbox) ，这不是id。请尝试改为传递 id 属性：

<INPUT TYPE="checkbox" id="checkconfirm<%=j%>" NAME="confirm<%=j%>" align="center" value="Yes" onclick="ConfirmBoxChecked(this.id,this.form.confirmYear<%=j%>.value,this.form.confirmStatus<%=j%>.value)">

您可以在复选框上轻松设置 html checked 属性以更新值。如果以后需要将其删除，请使用removeAttribute方法。

(function(checks){
  var doCheck = function(checkbox) {
return checkbox.setAttribute('checked', '');
  }, unCheck = function(checkbox) {
return checkbox.removeAttribute('checked');
  };
  checks = Array.prototype.slice.call(checks);
  checks.forEach(unCheck);
}(document.querySelectorAll('.confirm-checks')));
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Form Validation - check box with Javascript</title>
</head>
<body>
  <input type="checkbox" id="checkconfirm400" class="confirm-checks" />
  
</body>
</html>

相关文章：