1 Reply Latest reply on Jun 14, 2007 2:19 PM by iKnowKungFoo

    javascript and dynamically named checkboxes

    Golden Jet
      We have a page that has Select/Deselect All buttons to check/uncheck all the checkboxes in the form. The checkboxes are dynamically named:

      <cfoutput query="qHoldAdj">
      <cfinput type="checkbox" name="select_#qHoldAdj.CURRENTROW#">
      </cfoutput>

      There are also other field types in this form, so currently this is the JS we have to select all the checkboxes:

      function selectAll()
      {
      var objForm=document.forms.validateAdj;
      var m=objForm.length;
      for (var i=0; i<m; i++){
      var e=objForm.elements ;
      if (e.type=='checkbox' && e.name!='approve'){
      e.checked=true;
      }
      }
      }

      With 6 form fields per line, when we spit out over 100 rows a page, firing off this JS freezes the page for a bit while it runs through every single form field, decides if its a cb or not, then checks it if it is. Ugh!

      What would be nice if we could reference the checkboxes by name, eliminate 80% of the work per row. Problem is the names are dynamic and referencing them in JS is a headache we haven't figured out how to cure yet.

      Anybody have an idea of how to do this...?
        • 1. Re: javascript and dynamically named checkboxes
          iKnowKungFoo Level 1
          Can you not have all the grouped checkboxes use the same name, with different values?

          <cfoutput query="qHoldAdj">
          <cfinput type="checkbox" name="select_foo" value="#qHoldAdj.CURRENTROW#">
          </cfoutput>

          Then the Javascript is just looping over the array document.formName.select_foo.

          If you can't do this, then create a Javascript array variable to store all the checkbox names.

          <script type="text/javascript">
          _checkboxArray = new Array();
          <cfoutput query="qHoldAdj">
          _checkboxArray[_checkboxArray.length] = "select_#qHoldAdj.CURRENTROW#";
          </cfoutput>
          </script>

          So the final output will be:

          <script type="text/javascript">
          _checkboxArray = new Array();
          _checkboxArray[_checkboxArray.length] = "select_1"; // _checkboxArray[0]
          _checkboxArray[_checkboxArray.length] = "select_2"; // _checkboxArray[1]
          _checkboxArray[_checkboxArray.length] = "select_3"; // _checkboxArray[2]
          </cfoutput>
          </script>

          Now just loop over the array and check whichever box meets your criteria.