Auto Style Checkbox mit jQuery UI Theme

(jQuery noob hier)

Ich versuche ein Skript zu schreiben, wenn ich schreibe<input type='checkbox'/> wandelt es automatisch in eine jQuery UI-Schaltfläche um und sieht aus wie eine CheckBox. Bisheriger Beispielcode ...

var newCheckboxID = 0;
$( "input:checkbox" ).attr('id', "cbx-" + nextCheckboxID++); // how to do that?
$( "input:checkbox" ).after("<label style='width:16px; height:16px; vertical-align:middle;'></label>");
$( "input:checkbox" ).next().attr("for", $(this).attr('id') ); // doesn't work for sure
$( "input:checkbox" ).button();
$( "input:checkbox" ).button( "option", "text", false );
$( "input:checkbox" ).attr("onclick", "$(this).button( 'option', 'icons', {primary:((this.checked)?'ui-icon-check':null),secondary:null} )");

Entschuldigung, wenn es zu offensichtlich ist, aber ich habe mehr als eine Stunde verloren ...

BEARBEITEN

Endlich auf die altmodische Art und Weise (für die nicht funktionierenden Teile). Jegliche Kommentare, um es kompakter und "jQuery" zu machen, wären willkommen ... Codebeispiel

// ---- set ids
var checkboxID = 0;
//$( "input:checkbox" ).attr('id', "cbx-" + nextCheckboxID++); // how to do that?
var cboxes = document.getElementsByTagName('input');           // <-- do this instead
for(var i=0; i<cboxes.length; i++){
    if( cboxes[i].getAttribute('type')!='checkbox' ) continue;
    cboxes[i].setAttribute('id', 'cbx-'+checkboxID++);}

// ---- add labels
$( "input:checkbox" ).after("<label style='width:16px; height:16px; vertical-align:middle;'></label>");
//$( "input:checkbox" ).next().attr("for", $(this).attr('id') ); // doesn't work this
for(var i=0; i<cboxes.length; i++){                              // <-- do this instead
    if( cboxes[i].getAttribute('type')!='checkbox' ) continue;
    cboxes[i].nextSibling.setAttribute('for', cboxes[i].getAttribute('id') );}

// ---- create
$( "input:checkbox" ).button();
$( "input:checkbox" ).button( "option", "text", false );
$( "input:checkbox" ).attr("onclick", "$(this).button( 'option', 'icons', {primary:((this.checked)?'ui-icon-check':null),secondary:null} )");

Antworten auf die Frage(1)

Ihre Antwort auf die Frage