Field.length не работает на одном флажке

Question

У меня есть форма, которая содержит список данных, я добавил флажок для каждого из них, когда я нажимаю на самый верхний флажок, он выбирает все.Но если у меня есть только одна строка данных и я нажимаю на большинство верхних флажков, они не работают.Вот сценарий ниже.

////checking all checkbox on page
function checkAll(field)
{
   // alert(field.length);
    for (i = 0; i < field.length; i++){
        field[i].checked = true ;
    }
}

////unchecking all checkbox on page
function uncheckAll(field)
{
    for (i = 0; i < field.length; i++){
        field[i].checked = false;
    }
}
function selectCHK(e){
    if(e.checked==true){
        //alert("Yeah");
        checkAll(document.paginate_list.list);                                  
    }else{
        uncheckAll(document.paginate_list.list);

    }                               
}

function ApplyToSelected(){
var SelectedVal="";
var withSelected=document.getElementById("withSelected");
//
if(withSelected.value==1){

  //if(document.getElementById("list")){

  //    SelectedVal=document.getElementById("list").value;

  //}
for(i=0; i<document.paginate_list.list.length;i++){
      if (document.paginate_list.list[i].checked) {
          //alert(i);
          SelectedVal +=document.paginate_list.list[i].value+",";

      }
  }

      if(SelectedVal==""){
          return false;
      }

  if(confirm("Are you Sure you want to Delete the Selected Row?")){
      $.ajax({
          url: "../__lib__/pagingLib.php?tableDeleteID="+SelectedVal,
          context: document.body,
          success: function(response,status,xhr){
           if(response==1){
              alert("Deleted Successfully"); 
              window.location.reload();
           }else{
               alert(response);
               alert("An Error Occurred while Deleting, Please Try Again!");
           }
          // alert(response);
            }
       });
  }

}
}

HTML DATA

<form name="paginate_list" style="display:inline;" action="" method="post">
<table  class="PagingBody">
<tr>
<th><input type=checkbox   onclick=selectCHK(this)  ></th>
<th>Category Title</th><th>Actions</th>
</tr>
<tr class="even">
<td><input   name=list[]   type=checkbox  id=list   value=10></td>
<td>Web Design</td>
<td><a href=?page=cat&edit=10>Edit</a> | <a href=#10>Delete</a></td>
<tr/>
</table>

<table>
<tr>
<td>
<select name="withSelected" id="withSelected">  
<option value="0">With Selected</option>
<option value="1">Delete</option>
</select>

<input type="button" name="applyToSelected" id="applyToSelected" value="Apply to Selected" onclick="ApplyToSelected()" />
</td>
<tr/>
</table>
</form>

paginate_list.list представляет имя моей формы и имя списка.

Answer 1

Эта скрипка покажет, что происходит

ТРЕНИРОВКА ЗДЕСЬ

Причина, по которой это происходит, заключается в том, что браузер генерирует NodeList, когда у вас есть более одного элемента в списке, который вы отправляете в функцию checkAll(); В противном случае вы просто получите обычный элемент ввода.

Я добавил instanceof проверку, чтобы увидеть, какой это был тип объекта.

Чтобы проверить это в IE, следуйте этой теме здесь на SO: Проверка NodeList в IE

Удачи!