自动样式复选框与jQuery ui主题

（jQuery noob在这里）

我试着编写一个脚本，当我写会自动将其转换为jQuery UI按钮，看起来像一个checkBox。 目前的示例代码……

 var newCheckboxID = 0; $( "input:checkbox" ).attr('id', "cbx-" + nextCheckboxID++); // how to do that? $( "input:checkbox" ).after(""); $( "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} )"); 

对不起，如果它太明显但是我已经失去了超过一小时……

编辑

最后用老式的方式做了（因为没有工作的部分）。 任何关于使其更紧凑和“更多jQuery”的评论都会受到批评……代码示例

 // ---- 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(""); //$( "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} )"); 

Answer 1

工作实例：

• jsFiddle（没有评论）
• jsFiddle（没有UI主题切换器的评论！）
• jsFiddle（附评论）
• jsFiddle（只是为了好玩，使用计时器和其他一些jQueryfunction，仅供将来参考）
• jsFiddle（只是为了好玩，使用计时器并每秒更改UI主题！）

在下文中，我应该注意2个主要变化。 我添加了CSS来做你想要对“代码”中的标签做的事情（它真的不属于它）。

另外，我更改了HTML“for easy of jQuery”使用。 但是，我仍然在评论中注意到如何轻松地将其更改回来。

HTML

  Create New CheckBox  
 
     
​ 

CSS

 .inp-checkbox+label { width:16px; height:16px; vertical-align:middle; }​ 

JavaScript / jQuery

 // keep in mind, and i will explain, some of these "moving-parts" or not needed, but are added to show you the "ease" of jquery and help you see the solution // This global function is designed simply to allow the creation of new checkboxes as you specified, however, if you won't be making check boxes at end user time, then i suggest simply moving it to within the .each statement found later on. // Also, this could easily be written as a jQuery plugin so that you could make a "chainable" one-line call to change checkboxes to this but let's get to the nitty gritty first function createCheckBox(ele, i) { // First I simply create the new ID here, of course you can do this inline, but this gives us a bottleneck for possible errors var newID = "cbx-"+i; // below we use the param "ele" wich will be a jQuery Element object like $("#eleID") // This gives us the "chainability" we want so we don't need to waste time writing more lines to recall our element // You will also notice, the first thing i do is asign the "attribute" ID ele.attr({ "id": newID }) // Here we see "chainability at work, by not closing the last line, we can move right on to the next bit of code to apply to our element // In this case, I'm changing a "property", keep in mind this is kinda new to jQuery, // In older versions, you would have used .attr but now jQuery distinguishes between "attributes" and "properties" on elements (note we are using "edge", aka. the latest jQuery version .prop({ "type": "checkbox" }) // .after allows us to add an element after, but maintain our chainability so that we can continue to work on the input // here of course, I create a NEW label and then immidiatly add its "for" attribute to relate to our input ID .after($("").attr({ for: newID })) // I should note, by changing your CSS and/or changing input to , you can ELIMINATE the previous step all together // Now that the new label is added, lets set our input to be a button, .button({ text: false }) // of course, icon only // finally, let's add that click function and move on! // again, notice jQuery's chainability allows us no need to recall our element .click(function(e) { // FYI, there are about a dozen ways to achieve this, but for now, I'll stick with your example as it's not far from correct var toConsole = $(this).button("option", { icons: { primary: $(this)[0].checked ? "ui-icon-check" : "" } }); console.log(toConsole, toConsole[0].checked); }); // Finally, for sake of consoling this new button creation and showing you how it works, I'll return our ORIGINAL (yet now changed) element return ele; } $(function() { // This .each call upon the inputs containing the class I asiged them in the html, // Allows an easy way to edit each input and maintain a counter variable // Thus the "i" parameter // You could also use your ORIGINAL HTML, just change $(".inp-checkbox") to $("input:[type='checkbox']") or even $("input:checkbox") $(".inp-checkbox").each(function(i) { // as previously noted, we asign this function to a variable in order to get the return and console log it for your future vision! var newCheckBox = createCheckBox($(this), i); console.log(newCheckBox); }); // This next button added is simply to show how you can add new buttons at end-time // ENJOY!!! $("button").button().on("click", function(e) { var checkBoxCount = $("#CheckBoxes .inp-checkbox").length; var newCheckBox = $("").addClass("inp-checkbox").appendTo($("#CheckBoxes")); createCheckBox(newCheckBox , checkBoxCount); console.log(newCheckBox); }); });​ 

---

更新： 这里的初衷是纯粹回答这个问题，即创建一个jQuery UI样式复选框，并展示如何以多种方式使用jQuery。 但是，后来的评论询问了如何在其中加入传统的样式标签。 虽然有十亿个选项可供选择，但我只需从上面提取并扩展。

我采取的第一个选择非常简单。 使用jsFiddle (without comments with UI theme switcher!) ，我做了以下更改：

JavaScript / jQuery

 // First I add a new variable. // It will simply be for a new "wrapper" element, in which to ensure our button is encased. // Giving this element a new class gives easy access for later CSS or Event Triggering of sub elements (like the checkbox) var newID = "cbx-"+i, wrapper = $('
', { 'class': 'ui-checkbox-wrapper' }).appendTo('#CheckBoxes'); // Then I added a line to our ele series of methods. // This line simply append our element (checkbox) to our new wrapper // Take Note at how I added this method at start rather than at end. // Had I not done this, then the label would not have been wrapped! ele.appendTo(wrapper) // <-- new line! .attr({ "id": newID }) 

然后我简单地添加了以下CSS：

 #CheckBoxes .ui-button .ui-button-text { background: #A9A9A9; display: inline; font-size: 16px; left: 19px; padding: 0; position: relative; text-indent: 0; top: -4px; } 

结果！