在jQuery中更改复选框图标类onclick

Question

我有一些来自我的数据库的复选框，如下所示：

<input type="checkbox" class="hidden chkbox" id="single_checkbox_<?php echo $page->ID; ?>"    name="pages[]" value="<?php echo $page->ID; ?>"/>
<label rel="tooltip" data-original-title="Selecteer" class="btn" for="single_checkbox_<?php echo $page->ID; ?>"><i class="icon-check-empty"></i> Selecteer</label>

现在隐藏了复选框，因为我希望标签类充当复选框。

它实际上正在运行，但问题是在复选框被点击到<i class="icon-check-empty"></i>之后想要更改<i class="icon-check"></i>并在取消选中后返回icon-check-empty。

到目前为止我的jquery是

$('.chkbox').click(function(){

        if($(this).is(':checked')){
            $('i.icon-check-empty').replaceWith('<i class="icon-check"></i>');

        }else{

            $('i.icon-check').replaceWith('<i class="icon-check-empty"></i>');

        }

    });

它会改变，但它会改变所有的复选框，而这不是我正在寻找的。

如果有人知道如何帮助我那会很棒。

亲切的问候。

Answer 1

你可以通过

来做到这一点

$("selector ").attr('class', 'newClass'); //set class (regardless of what it was)

或

 $("selector ").addClass('newClass'); //add a class
 $("selector ").removeClass("second"); //remove class

list of jQuery methods specifically for the class attribute.

---

试

$('.chkbox').click(function () {
    var $this = $(this);
    if ($this.is(':checked')) {
        $this.next().find('i.icon-check-empty').replaceWith('<i class="icon-check"></i>');
    } else {
        $this.next().find('i.icon-check').replaceWith('<i class="icon-check-empty"></i>');
    }
});

更好的方法是使用toogle

$('.chkbox').click(function(){
     var $ico = $(this).next().find('i');
     $ico.toggleClass('icon-check icon-check-empty');
});

Answer 2

尝试

$('.chkbox').click(function(){
     var $this = $(this);
     if($this.is(':checked')){
         $this.next().find('i.icon-check-empty').replaceWith('<i class="icon-check"></i>');    
     } else {
         $this.next().find('i.icon-check').replaceWith('<i class="icon-check-empty"></i>');
     }
 });

或者更好的只是切换课程

$('.chkbox').click(function () {
    var $this = $(this),
        isChecked = $this.is(':checked');
    $this.next().find('i')
        .toggleClass('icon-check-empty', !isChecked)
        .toggleClass('icon-check', isChecked);

});

Answer 3

的 jsBin demo 的

$('.chkbox').click(function(){
     var $ico = $(this).next('label').find('i');
     $ico.toggleClass('icon-check icon-check-empty');
});

或者喜欢：

的 jsBin demo 的

function checkTest( chkbx ) {

    var $ico     = $(chkbx).next('label').find('i'),
        icoClass = ['icon-check', 'icon-check-empty'],
        io       = $(chkbx).is(':checked') ? 0 : 1 ;

    $ico.removeClass().addClass( icoClass[io] );

}


$('.chkbox').each(function(){
    checkTest( this );  // Test all on page load
}).click(function(){
    checkTest( this );  // Test on click
});

Answer 4

还要查看.addClass()，.removeClass()，.toggleClass()

Answer 5

你可以试试这个：

$('.chkbox').click(function(){

        if($(this).is(':checked')){
            $(this).next().find('i.icon-check-empty')attr("class",icon-check);

        }else{

            $(this).next().find('i.icon-check').attr("class",icon-check-empty);

        }

    });

Answer 6

你可以这样做：

$('.chkbox').click(function(){
    var i = $(this).next().find("i");

    if($(this).is(':checked')) {
        i.removeClass("icon-check-empty");
        i.addClass("icon-check");
    }
    else {
        i.removeClass("icon-check");
        i.addClass("icon-check-empty");
    }
});

Answer 7

尝试这样的事情

HTML

<input type="checkbox" class="chkbox" id="chkbox"  name="chkbox" value="value"/>

JQuery的

$('.chkbox').click(function(){

    console.log('click');

    if($(this).is(':checked')){
        console.log('checked');
        $("#id").addClass('icon-check');
        $("#id").removeClass('icon-check-empty');
    }
    else{
        console.log('unchecked');
        $("#id").addClass('icon-check-empty');
        $("#id").removeClass('icon-check');
    }

});​

Answer 8

你可以使用removeClass和addClass做你想做的事情

$('.chkbox').click(function(){

        if($(this).is(':checked')){
           $(this).removeClass("icon-check-empty");
           $(this).addClass("icon-check");
        }else{
           $(this).removeClass("icon-check");
           $(this).addClass("icon-check-empty");

        }

    });