Question

I have a form which contains list of data, I added a checkbox in from of each, when I click on the uppermost checkbox it selects all. But if I have just one row of data and I click on the upper most checkboxes dont work. Here is the script below.

////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 represents the name of my form and the list name.

Answer 1

This fiddle will demonstrate what’s happening

FIDDLE HERE

The reason why this is happening is because the browser generates a NodeList when you have more than one element in the list that you send to the function checkAll();
Otherwise you just get the normal input element.

I added an instanceof check to see what type of object it was.

To check for this in IE follow this thread here on SO:
NodeList check in IE

Good luck!