ajax加載的單個復選框顯示在javascript驗證中未定義

Question

大家好，

我有簡單的HTML FROM

 <form id="adda" name="adda" method="post" action="">

    Select Batch :<br/>

    <select  name="standard" id="standard" onchange="return changestudent(this.value);"  >

        <option value="0">-Select Batch-</option>

         <option value="1">BatchName1</option>
              <option value="2">BatchName2</option>
    </select>


   Students :

    <div id="s">

    <input type="checkbox" name="sname"  value="<?=$raw2['Id']?>"  /><?=$raw2['FirstName']?> <?=$raw2['LastName']?><br />

    </div>

    <input type="button"  value="Add" onclick="return val();" style="width:80px; height:28px; color:#8A4E00; background-color:#8bc33f;cursor:pointer;margin-left:10px;" /> <? } ?>


    <input type="hidden"  name="hsid" id="hsid" value="" />

    <input type="hidden" name="sub" id="sub" value="1" />

    </form>

在下拉列表的變化中，我調用了javascript函數changestudent（）來創建ajax內容，並顯示該批次中帶有ckeckboxes的學生列表。 這是ajax功能

    <script>
function changestudent(stdid)
{



    var strName="Msxml2.XMLHTTP"

            if (window.XMLHttpRequest)

            { // Mozilla, Safari, ...

                xmlhttp = new XMLHttpRequest();

            }

            else if (window.ActiveXObject)

            { // IE

                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

            }   



            xmlhttp.open('GET', 'changestudent.php?stdid='+stdid+'&table=studentdetail', true);

            xmlhttp.onreadystatechange = showsub;   

            xmlhttp.send(null);

}

function showsub()

{

if (xmlhttp.readyState == 4)

{

    str = xmlhttp.responseText; 



    document.getElementById("s").innerHTML = str;

}

}


    </script>

我的問題是，當ajax返回單個復選框javascript函數時，我用來驗證顯示該復選框未定義的表單。

這是我用來驗證表格的javacript函數

 <script type="text/javascript">
function val()

{



    if(document.adda.standard.value=="0")

    {

        alert("Please Select Batch");

        document.adda.standard.focus();

        return false;

    }


var cnt = 0;



    for(var i = 0;i < document.adda.sname.length;i++)

    {

        //alert("1");

        if(document.adda.sname[i].checked==true)

        {

            document.adda.hsid.value = document.adda.hsid.value+','+document.adda.sname[i].value; 

            cnt = cnt+1;

        }

    }

    if(cnt==0)

    {

    alert("Please Select Student");

    return false;

    }

    document.adda.submit();

誰能幫我解決這個問題？ 提前致謝

Answer 1

問題是document.adda.sname如果有多個具有該名稱的復選框，則返回一個類似數組的對象，但是，如果只有一個，則它返回復選框對象本身（因此，當存在多個復選框時，不能使用[i]語法只有一個。

解決方案是使用其他東西來抓住復選框，例如querySelectorAll ，無論找到多少個對象，該復選框將始終返回類似於對象的數組。

var checkboxes = document.querySelectorAll('form[name=adda] input[name=sname]');

for(var i=0; i<checkboxes.length; i++){
    if(checkboxes[i].checked){
        document.adda.hsid.value = document.adda.hsid.value+','+ checkboxes[i].value; 
        cnt = cnt+1;
    }
}