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

【问题标题】：Change checkbox icon class onclick in jQuery在jQuery中更改复选框图标类onclick
【发布时间】：2012-12-20 13:33:40
【问题描述】：

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

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

        }

    });

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

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

亲切的问候。

【问题讨论】：

标签： jquery html

【解决方案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>');
    }
});

更好的方法是使用工具

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

【讨论】：

感谢您的快速回复，我已经尝试过了，但这仍然会改变我所有的图标类。我只想更改被选中的那个。

【解决方案2】：

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

【讨论】：

+1 - 这是这样做的方法。我刚刚对本质上的东西做了一个小提琴。 :)
谢谢，完美运行..它一直让我发疯，一段时间后我只是在尝试最奇怪的解决方案哈哈。事实上，这很容易。谢谢一百万：D
@JarnovanRhijn 添加了一个演示，您无需为 HTML 中的图标分配类，您只需将 checked="checked" 添加到所需的输入即可选择这些类
@roXon 谢谢伙计.. 越来越好 :) 将按照演示提供的方式实现这一点.. 再次感谢：D

【解决方案3】：

试试

$('.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);

});

【讨论】：

【解决方案4】：

也请看.addClass()、.removeClass()、.toggleClass()

【讨论】：

【解决方案5】：

你可以试试这个：

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

【讨论】：

【解决方案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");
    }
});

【讨论】：

【解决方案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');
    }

});

【讨论】：

【解决方案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");

        }

    });

【讨论】：