表单验证 - 使用Javascript复选框

时间:2016-01-19 23:14:39

标签: javascript html validation

我有一些信息,我试图在用户点击"确认"复选框。问题是这是从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等)。

confirmYear和confirmStatus是我正在检查的两个数据。

我的javascript onclick功能是这样的:

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;  }

}

它有效!

2 个答案:

答案 0 :(得分:2)

您正在将复选框的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)">

答案 1 :(得分:1)

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

&#13;
&#13;
(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')));
&#13;
<!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>
&#13;
&#13;
&#13;