title: Auto style checkbox with jQuery ui theme
body: <p>(jQuery noob here)</p>
  <p>Im trying to write a script which when I write <code>&lt;input type='checkbox'/&gt;</code> will automatically convert it to jQuery UI button and look like a checkBox.
  Sample code so far ...</p>
  <pre><code>var newCheckboxID = 0;
  $( &quot;input:checkbox&quot; ).attr('id', &quot;cbx-&quot; + nextCheckboxID++); // how to do that?
  $( &quot;input:checkbox&quot; ).after(&quot;&lt;label style='width:16px; height:16px; vertical-align:middle;'&gt;&lt;/label&gt;&quot;);
  $( &quot;input:checkbox&quot; ).next().attr(&quot;for&quot;, $(this).attr('id') ); // doesn't work for sure
  $( &quot;input:checkbox&quot; ).button();
  $( &quot;input:checkbox&quot; ).button( &quot;option&quot;, &quot;text&quot;, false );
  $( &quot;input:checkbox&quot; ).attr(&quot;onclick&quot;, &quot;$(this).button( 'option', 'icons', {primary:((this.checked)?'ui-icon-check':null),secondary:null} )&quot;);
          
  </code></pre>
  <p>Sorry, if it's too obvious but I've lost more than hour in that ...</p>
  <h2><strong>EDIT</strong></h2>
  <p>Finally did it with the old fashioned way (for the doesn't working parts).
  Any comments for making it more compact and &quot;more jQuery&quot; would be appriciated ...
  Code sample</p>
  <pre><code>// ---- set ids
  var checkboxID = 0;
  //$( &quot;input:checkbox&quot; ).attr('id', &quot;cbx-&quot; + nextCheckboxID++); // how to do that?
  var cboxes = document.getElementsByTagName('input');           // &lt;-- do this instead
  for(var i=0; i&lt;cboxes.length; i++){
      if( cboxes[i].getAttribute('type')!='checkbox' ) continue;
      cboxes[i].setAttribute('id', 'cbx-'+checkboxID++);}
  
  // ---- add labels
  $( &quot;input:checkbox&quot; ).after(&quot;&lt;label style='width:16px; height:16px; vertical-align:middle;'&gt;&lt;/label&gt;&quot;);
  //$( &quot;input:checkbox&quot; ).next().attr(&quot;for&quot;, $(this).attr('id') ); // doesn't work this
  for(var i=0; i&lt;cboxes.length; i++){                              // &lt;-- do this instead
      if( cboxes[i].getAttribute('type')!='checkbox' ) continue;
      cboxes[i].nextSibling.setAttribute('for', cboxes[i].getAttribute('id') );}
  
  // ---- create
  $( &quot;input:checkbox&quot; ).button();
  $( &quot;input:checkbox&quot; ).button( &quot;option&quot;, &quot;text&quot;, false );
  $( &quot;input:checkbox&quot; ).attr(&quot;onclick&quot;, &quot;$(this).button( 'option', 'icons', {primary:((this.checked)?'ui-icon-check':null),secondary:null} )&quot;);
  </code></pre>