用JavaScript选中的复选框不发布

Question

I have an array of 27 checkboxes generated using php. Checking the checkboxes manually works perfectly. The checkboxes are placed in an html table (other tabular dated is included), (all inside the form tags) with name="chk[]' and value='Index Number' of the array (0-27) in the usual form of

When I execute a typical Java-script "Check All" function (from a link_click or button_click) the check boxes all display the check-boxes as 'checked'. But, nothing gets submitted. Print_r shows the 'chk' array is indeed empty when I submit!

If I set the check-boxes manually, $_POST('chk') array IS posted, and everything works as expected.

It appears that when checking the check-boxes with Javascript, ¡checked' values don't get posted.

Print_r confirms the 'chk' array is empty whenever the 'displayed' value was set using Javascript!

Can anybody attempt to explain to me why the 'displayed value' of the checkbox is not reflected by, or included in the post?

The page validates on W3C Ok and I have crawled over my code and cannot find any likely errors. Platform is Win7/Wamp Sever/Firefox. Google/StackOverflow search does not reveal any similar symptoms/solutions.

Many thanks in advance for anyone with an idea on the problem.

The javascript CheckAll function I am using is -

function checkall(frm) {
  for (var i=0; i<frm.elements.length; i++) {
  if (frm.elements[i].name = "chk")
  {frm.elements[i].checked = true;}
  }
  }   

The array of 27 check-boxes is in the normal array format, with 'value' being the array Index.

<tr><td><input type='checkbox' title='' name='chk[]' value='6' ></td> text label </tr>

Answer 1

You have two errors in your if condition.

1. It's not even a condition, it's an assignment statement (conditions are written with double equal signs)
2. Element name should be compared to chk[] instead of chk

Your checkall function should be:

function checkall(frm) {
  for (var i=0; i<frm.elements.length; i++) {
    if (frm.elements[i].name == "chk[]")
      frm.elements[i].checked = true;
  }
}

Now you might be wondering what the hell does this have to do with the values not being submitted, and why are they checked, I can explain.

Your current code is assigning a new name "chk" to the checkbox elements (see reason 1 why your condition is not even a condition), and since it's not a condition, the if statement is always true, and the code segment that sets the checked value to true is being executed and that's why you can see the elements checked. Now when you request $_POST['chk[]'] in your PHP you get nothing because the elements' names were all changed to 'chk' by your supposedly (if "condition").

Answer 2

iSWORD has a complete answer, this is just some additional hints. You can simplify the function by taking advantage of built–in browser features:

function checkall(frm) {
  var cbs = frm['chk[]'];
  for (var i=0, iLen=cbs.length; i<iLen; i++) {
    cbs[i].checked = true;
  }
}  

Form controls are available as named properties of the form. Where more than one control shares the same name, an HTML collection is returned. So in the above, cbs is a collection of all the controls with a name of 'chk[]' .

To account for cases where there might be zero, one or more same–named controls, use:

function checkall(frm) {
  var cbs = frm['chk[]'];
  if (cbs) {
    if (typeof cbs.length == 'number') {
      for (var i=0, iLen=cbs.length; i<iLen; i++) {
        cbs[i].checked = true;
      }
    } else {
      cbs.checked = true;
    }
  }
}  

You could also use querySelectorAll , which always returns a collection (but might not be available everywhere) and use the following with the first function:

var cbs = document.querySelectorAll('input[name="chk[]"]');

Answer 3

You can try using this function

Javascript

function checkall(formname,checkname,thestate){
    var el_collection=eval("document.forms."+formname+"."+checkname)
    for (c=0;c<el_collection.length;c++)
    el_collection[c].checked=thestate
}

HTML

<a href="javascript:checkall('test','chk',true)">Check All</a>
<a href="javascript:checkall('test','chk',false)">Uncheck All</a>