[JS] Form checkboxes doorlopen

[Reveller]

Ik heb de volgende select en form:

code:

<select name="edit[action]" onchange="user_action(this.options[this.selectedIndex].value)">
  <option value="select-x">all</option>
  <option value="select-0">blocked</option>
  <option value="select-1">active</option>
  <option value="select-2">deleted</option>
</select>

<form>
  <input type="checkbox" name="edit[users][]" value="45-1"> Jan
  <input type="checkbox" name="edit[users][]" value="65-2"> Bas
  <input type="checkbox" name="edit[users][]" value="67-1"> Aad
</form>

In mijn CMS heeft elke user een status (0 = blocked, 1= active of 2 = deleted). In het form staan de users. De value van elke checkbox is userId-userStatus. Jan heeft dus als ID 45 en is active (want: 1).

Ik tracht nu een functie te bouwen waarmee ik in 1 keer alle users kan selecteren, of alle geblokte, active of deleted users:

JavaScript:

function user_action(option) {
  var form = document.forms[0];
  var msg = 'Selecteer eerst een of meerdere users';

  if (option.indexOf("-") != -1) {
    var option = option.split('-'), action = option[0], select = option[1];
  } else action = option;
  
  switch (action) {
    case 'select':
      for (i = 0; i < edit[users][].length; i++) {
        // split option value, kijk naar value[1]
        // en vergelijk met option[1] value
      }
  }
}

De for-loop gaat echter fout, omdat ik niet door edit[users][] kan bladeren. Hoe moet ik deze array van checkboxes dan aanroepen?

[Suaver]

Ik heb ook zo'n probleem gehad en zo opgelost. Ik heb een checkbox gemaakt, bovenaan als hier op geklikt wordt worden alle checkboxes geselecteerd binnen het form. Wordt er wederom op geklikt dan wordt alles weer unchecked.

De check-checkbox:

HTML:

<input name="checker" type="checkbox" onClick="checkAll()">

De normale checkbox als volgt:

HTML:

<input type="checkbox" name="list[]" value="poep">

De functie checkAll():

JavaScript:

function checkAll() {
  if (document.myform.checker.checked != true) {
    for (var i = 0; i < document.myform.elements.length; i ++){
      var e = document.myform.elements[i];
      if (e.type == 'checkbox'){
        e.checked = false;
      }
    }
  } else {
    for (var i = 0; i < document.myform.elements.length; i ++){
      var e = document.myform.elements[i];
      if (e.type == 'checkbox'){
        e.checked = true;
      }
    }
  }
}

Het FORM waar de checkboxes instaan heet: myform

[Reveller]

Dank je! Hiermee lukt het wel

[ Voor 60% gewijzigd door Reveller op 29-01-2007 20:36 ]

[XWB]

ipv document.forms kan je met het tis keyword ook het form meegeven.

HTML:

<script type="text/javascript">
function checkAll( form ) {
  if (form.checker.checked != true) {
    for (var i = 0; i < form.elements.length; i ++){
      var e = form.elements[i];
      if (e.type == 'checkbox'){
        e.checked = false;
      }
    }
  } else {
    for (var i = 0; i < form.elements.length; i ++){
      var e = form.elements[i];
      if (e.type == 'checkbox'){
        e.checked = true;
      }
    }
  }
}
</script>

<input name="checker" type="checkbox" onClick="checkAll(this.form)">

Zo ben je niet afhankelijk van een formnaam. Overigens is tweemaal dezelfde code schrijven niet nodig:

JavaScript:

function checkAll ( form ) {
    var check = true;
    var e;
    
    if ( ! form.checker.checked )
        check = false;
    
    for ( var i = 0; i < form.elements.length; i++ ) {
      e = form.elements[i];
      if ( e.type.toLowerCase() == 'checkbox' )
        e.checked = check;
    }
}