ändern Checkbox Symbol Klasse Onclick in jQuery

Ich habe einige Kontrollkästchen, die aus meiner Datenbank wich wie folgt aussehen kommen:ändern Checkbox Symbol Klasse Onclick in jQuery

<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>

nun die Kontrollkästchen versteckt sind, weil ich das Label Klasse wollen als die Kontrollkästchen handeln.

es ist in der Tat funktioniert, aber das Problem ist, dass <i class="icon-check-empty"></i> geändert werden soll, nachdem das Kontrollkästchen auf <i class="icon-check"></i> und zurück auf Symbol-check-leer nach unchecked geklickt wird.

Die jquery ich bisher habe, ist

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

     } 

    });

Es ist jedoch nicht ändert es ändert sich alle Kontrollkästchen, und das ist nicht das, was ich suche.

Wenn jemand eine Idee hat, wie man mir hilft, wäre das großartig.

Mit freundlichen Grüßen.

Quelle

2012-12-20 Jarno van Rhijn

jsBin demo

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

Oder wie wollen:

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

Quelle

2012-12-20 13:43:53

+1 - das ist der Weg, es zu tun. Ich bin gerade damit fertig geworden, etwas mit dem zu tun, was im Wesentlichen so ist. :) – karim79

Danke, funktioniert perfekt .. es hat mich verrückt gemacht, nach einer Weile versuche ich nur die seltsamsten Lösungen haha. Es war tatsächlich sehr einfach. Danke eine Million: D –

@JarnovanRhijn du bist willkommen :) thx –

Sie können dies tun, indem

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

oder durch

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

list of jQuery methods specifically for the class attribute.

versuchen

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

und besserer Ansatz wird mit toogle

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

Quelle

2012-12-20 13:34:42

Danke für Ihre schnelle Antwort, ich habe es versucht, aber dies ändert immer noch alle meine Icon-Klassen. Ich möchte nur, dass das, das überprüft wird, geändert wird. –

@JarnovanRhijn können Sie meinen unten angegebenen Code versuchen :) –

Versuchen

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

Oder besser einfach wechseln Klasse

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

});

Quelle

2012-12-20 13:37:47

auch bei .addClass() schauen, .removeClass(), .toggleClass()

Quelle

2012-12-20 13:38:02

Sie können versuchen, th ist:

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

     } 

    });

Quelle

2012-12-20 13:39:28

Sie tun können:

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

Quelle

2012-12-20 13:41:12 lante

Probieren Sie etwas wie dieses

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

});

Quelle

2012-12-20 13:42:25 Doink

können Sie removeClass und addClass verwenden zu tun, was Sie

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

     } 

    });

Quelle

2012-12-20 13:43:01 zer0bit

ändern Checkbox Symbol Klasse Onclick in jQuery

Antwort

Verwandte Themen