使用Javascript循环复选框

时间:2011-05-18 15:21:02

标签: c# javascript asp.net

我尝试使用我在这里和其他地方找到的javascript示例。问题是我在服务器上使用Table控件,因此我使用的javascript无法识别服务器端的复选框。我一遍又一遍地收到同样的错误信息。我有20行,每行有2个列,一个用于复选框,另一个用于用户必须通过在提交之前选中复选框来验证的语句。用户必须对每个盒子进行物理检查。如果没有选中任何复选框,那么我想看到一条弹出消息,说他们必须检查所有框,否则我正在重定向到另一个页面,当然所有这些都在按钮点击事件上。这一切都在Visual Studio 2010上,使用C#,后端是Sql-server。

这是我正在使用的JS样本。

<SCRIPT TYPE="text/javascript" LANGUAGE=JAVASCRIPT>
function checkCheckBoxes() {
    if (document.frmTest. CheckBox1.checked == false &&
        document.frmTest. CheckBox2.checked == false &&
        document.frmTest. CheckBox3.checked == false &&
document.frmTest. CheckBox4.checked == false &&
document.frmTest. CheckBox19.checked == false &&
document.frmTest. CheckBox5.checked == false &&
document.frmTest. CheckBox6.checked == false &&
document.frmTest. CheckBox7.checked == false &&
document.frmTest. CheckBox8.checked == false &&
document.frmTest. CheckBox9.checked == false &&
document.frmTest. CheckBox10.checked == false &&
document.frmTest. CheckBox11.checked == false &&
document.frmTest. CheckBox12.checked == false &&
document.frmTest. CheckBox13.checked == false &&
document.frmTest. CheckBox14.checked == false &&
document.frmTest. CheckBox15.checked == false &&
document.frmTest. CheckBox16.checked == false &&
document.frmTest. CheckBox17.checked == false &&
document.frmTest. CheckBox18.checked == false &&
document.frmTest. CheckBox20.checked == false &&)
        {
        alert ('You must check all the checkboxes!');
        return false;
        }
    else
        {
        return true;
        }
    }
</SCRIPT>


then, <form onsubmit="return checkCheckBoxes();" action="">
<input type="checkbox" name=" CheckBox1" value="1">
<input type="checkbox" name=" CheckBox2" value="2">
<input type="checkbox" name=" CheckBox3" value="3">
<input type="checkbox" name=" CheckBox4" value="4">
<input type="checkbox" name=" CheckBox19" value="19">
<input type="checkbox" name=" CheckBox5" value="5">
<input type="checkbox" name=" CheckBox6" value="6">
<input type="checkbox" name=" CheckBox7" value="7">
<input type="checkbox" name=" CheckBox8" value="8>
<input type="checkbox" name=" CheckBox9" value="9">
<input type="checkbox" name=" CheckBox10" value="10">
<input type="checkbox" name=" CheckBox11" value="11">
<input type="checkbox" name=" CheckBox12" value="12">
<input type="checkbox" name=" CheckBox13" value="13">
<input type="checkbox" name=" CheckBox14" value="14">
<input type="checkbox" name=" CheckBox15" value="15">
<input type="checkbox" name=" CheckBox16" value="16">
<input type="checkbox" name=" CheckBox17" value="17">
<input type="checkbox" name=" CheckBox18" value="19">
<input type="checkbox" name=" CheckBox20" value="20">
<input type="submit" value="Submit!" />
</form>

但我意识到Checkbox不能是服务器控件,而是jscript控件。

我在编码方面非常环保,请耐心等待。我非常感谢能得到的任何帮助。感谢。

3 个答案:

答案 0 :(得分:5)

你需要这样的东西

var pass = true;

for (var i = 0; i < form.elements.length; i++ ) 
{
    if (form.elements[i].type == 'checkbox')
    {
        if (form.elements[i].checked == false)
        {
            pass = false;
        }
    }
}

if(!pass)
{
    alert ('You must check all the checkboxes!');
}

return pass;

希望这有帮助。

答案 1 :(得分:1)

您可以使用C#ClientID属性获取复选框的HTML ID。将该ID插入您的Javascript中,然后您就可以选择相关的复选框并随意执行任何操作。

答案 2 :(得分:0)

使用querySelectorAll检查是否有任何未选中的复选框。如果有,请抛出错误消息,否则回发。

function checkCheckboxes(){
   if(document.querySelectorAll('input[type="checkbox"]:not(:checked)').length > 0){
     alert("all checkboxes must be checked");
     return false;
   } else{
     return true;
   }
}

注意:这只适用于现代浏览器Firefox 3.1 +,IE8 +(仅限IE8标准模式)和Safari 3.1 +