javascript 带有 jQ​​uery ui 主题的自动样式复选框

Auto style checkbox with jQuery ui theme

提问by ApollonDigital

(jQuery noob here)

（这里是 jQuery 菜鸟）

Im trying to write a script which when I write <input type='checkbox'/>will automatically convert it to jQuery UI button and look like a checkBox. Sample code so far ...

我正在尝试编写一个脚本，当我编写该脚本时，<input type='checkbox'/>它会自动将其转换为 jQuery UI 按钮并看起来像一个复选框。到目前为止的示例代码...

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

Sorry, if it's too obvious but I've lost more than hour in that ...

对不起，如果它太明显了，但我已经失去了一个多小时......

EDIT

编辑

Finally did it with the old fashioned way (for the doesn't working parts). Any comments for making it more compact and "more jQuery" would be appriciated ... Code sample

最后用老式的方式做到了（对于不工作的部分）。任何使它更紧凑和“更多 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("<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} )");

回答by SpYk3HH

Working examples:

工作示例：

• jsFiddle (without comments)
• jsFiddle (without comments with UI theme switcher!)
• jsFiddle (with comments)
• jsFiddle (Just for fun, uses timer and some other jQuery features, just for future reference)
• jsFiddle (Just for fun, uses timer and changes UI theme every second!)

• jsFiddle（无评论）
• jsFiddle（不带 UI 主题切换器评论！）
• jsFiddle（带注释）
• jsFiddle（只是为了好玩，使用计时器和其他一些 jQuery 功能，仅供将来参考）
• jsFiddle（只是为了好玩，使用计时器并每秒更改 UI 主题！）

In the following, I should note 2 primary changes. I added CSS to do what you were trying to do to labels in "code" (where it really doesn't belong).

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

Also, I changed the HTML for "ease of jQuery" use. However, I still noted in the comments how you can easily change it back.

此外，我更改了 HTML 以“轻松使用 jQuery”。但是，我仍然在评论中指出您如何轻松地将其改回。

the HTML

在HTML

<center>
    <button>Create New CheckBox</button>
</center>
<hr />
<div id="CheckBoxes">
    <input class="inp-checkbox" />
    <input class="inp-checkbox" />
    <input class="inp-checkbox" />
    <input class="inp-checkbox" />
</div>?

the CSS

在CSS

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

the JavaScript/jQuery

在使用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($("<label />").attr({ for: newID  }))
        //  I should note, by changing your CSS and/or changing input to <button>, 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 = $("<input />").addClass("inp-checkbox").appendTo($("#CheckBoxes"));
        createCheckBox(newCheckBox , checkBoxCount);
        console.log(newCheckBox);
    });
});?

---

---

Update: The original intent here was to purely answer the question, which was to create a jQuery UI styled checkbox and show how jQuery can be used in multiple ways. However, a later comment queried how to include a traditional style label with it. While there are a billion options for this, I'll simply take from the above and extend.

更新：这里的最初意图纯粹是回答这个问题，即创建一个 jQuery UI 样式的复选框并展示如何以多种方式使用 jQuery。但是，后来的评论询问如何在其中包含传统样式标签。虽然对此有十亿种选择，但我将简单地从上述内容中进行扩展。

The first option I took is pretty simple. Using jsFiddle (without comments with UI theme switcher!), I made the following changes:

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

the JavaScript/jQuery

在使用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 = $('<div />', { '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  })

Then I simply added the following CSS:

然后我简单地添加了以下 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;
}

Results!

结果！