5

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

<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>');

        }

    });

它确实改变了，但是它改变了所有的复选框，这不是我想要的。

如果有人知道如何帮助我，那就太好了。

亲切的问候。

4

8 回答 8

4

你可以这样做

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

或通过

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

专门用于类属性的 jQuery 方法列表。

尝试

$('.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 $ico = $(this).next().find('i');
     $ico.toggleClass('icon-check icon-check-empty');
});
于 2012-12-20T13:34:42.527 回答
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);

});
于 2012-12-20T13:37:47.913 回答
2

jsBin 演示

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

或者像：

jsBin 演示

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
});
于 2012-12-20T13:43:53.150 回答
1

也看看.addClass() , .removeClass() , .toggleClass()

于 2012-12-20T13:38:02.253 回答
1

你可以试试这个：

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

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

        }别的{

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

        }

    });
于 2012-12-20T13:39:28.697 回答
1

你可以做：

$('.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");
    }
});
于 2012-12-20T13:41:12.820 回答
1

尝试这样的事情

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

});​
于 2012-12-20T13:42:25.707 回答
1

你可以使用 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");

        }

    });
于 2012-12-20T13:43:01.400 回答