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

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

より良いアプローチはtoogleを使用することです

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

できるよ：

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

.addClass()、.removeClass()、.toggleClass ()も見てください

于 2012-12-20T13:38:02.253 に答える
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 に答える
1

これを試すことができます：

$('.chkbox').クリック(関数(){

        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

このようなことを試してください

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 に答える