jquery each or custom checkbox question

I have a problem on the result and i'm already tired of solving.

HTML

<input type="checkbox" class="check" checked="checked" />
<input type="checkbox" class="check" />

JQUERY

$.fn.op_checkbox = function() {
    $(this).hide();
    $(this).wrap('<div class="op_checkbox"></div>');
    $(this).parent().append('<div class="op_check_on_off">&nbsp;</div>');
    if($(this).is(':checked')) {
        $('.op_check_on_off').addClass('op_check_on');
    }
    else {
        $('.op_check_on_off').addClass('op_check_off');
    }
}
$(document).ready(function() {
    $('.check').op_checkbox();
});

Result

<div class="op_checkbox">
    <input class="check" type="checkbox" checked="checked" style="display: none;">
    <div class="op_check_on_off op_check_on">&nbsp;</div>
</div>
<div class="op_checkbox">
    <input class="check" type="checkbox" style="display: none;">
    <div class="op_check_on_off op_check_on">&nbsp;</div>
</div>

The result of first checkbox is copied in 2nd checkbox, the result should be:

<div class="op_checkbox"&g开发者_开发技巧t;
    <input class="check" type="checkbox" checked="checked" style="display: none;">
    <div class="op_check_on_off op_check_on">&nbsp;</div> <!-- on here -->
</div>
<div class="op_checkbox">
    <input class="check" type="checkbox" style="display: none;">
    <div class="op_check_on_off op_check_off">&nbsp;</div> <!-- off here -->
</div>

What is the reason and problem of this? Thanks for your help

I think there are two problems currently in your code. Sangdol helped address the issue that comes with the scoping of $(this), and Shankar helped with the issue of your selector when you are adding the class. http://jsfiddle.net/rkw79/DZYFN/

$('.check').each( function() {
    $(this).hide();
    $(this).wrap('<div class="op_checkbox"></div>');
    $(this).parent().append('<div class="op_check_on_off">&nbsp;</div>');
    if($(this).is(':checked')) {
        $(this).parent().find('div').addClass('op_check_on');
    }
    else {
        $(this).parent().find('div').addClass('op_check_off');
    }
})

The this inside of function op_checkbox() is array-like jQuery object, so you should process each object with loop like this:

$.fn.op_checkbox = function() {
    this.each(function(){
        var $this = $(this);

        $this.hide()
             .wrap('<div class="op_checkbox"></div>')
             .parent().append('<div class="op_check_on_off">&nbsp;</div>');

        if($this.is(':checked')) {
            $this.parent().find('.op_check_on_off').addClass('op_check_on');
        }
        else {
            $this.parent().find('.op_check_on_off').addClass('op_check_off');
        }
    });    
}
$(document).ready(function() {
    $('.check').op_checkbox();
});

And I refactored some code.

1. Inside of fn function, this is already jQuery object so you don't need to wrap like $(this).
2. Used jQuery chain.
3. Cached $(this). This can improve performance(though it's small improvement).

Try this

$.fn.op_checkbox = function() {
    $(this).hide();
    $(this).wrap('<div class="op_checkbox"></div>');
    $(this).parent().append('<div class="op_check_on_off">&nbsp;</div>');
    if($(this).is(':checked')) {
        $(this).parent().find('.op_check_on_off').addClass('op_check_on');
    }
    else {
        $(this).parent().find('.op_check_on_off').addClass('op_check_off');
    }
}
$(document).ready(function() {
    $('.check').op_checkbox();
});