webentwicklung-frage-antwort-db.com.de

iCheck Überprüfen Sie, ob das Kontrollkästchen aktiviert ist

Ich verwende das iCheck-Plugin zum Anpassen von Kontrollkästchen. Ich muss einen bestimmten Text anzeigen, wenn ein oder mehrere Kontrollkästchen aktiviert ist, und den Text ausblenden, wenn keine markiert sind. 

Der Code, den ich derzeit habe, zeigt den Text beim ersten Klick an, verdeckt ihn jedoch nicht, wenn ich nicht noch zweimal klicke. Ich habe mehrere Kontrollkästchen und möchte Text anzeigen, wenn einer von ihnen markiert ist, sonst den Text ausblenden . Hat jemand eine Idee? Das Plugin hat:

ifChecked
ifChanged
ifClicked
ifUnchecked
ifToggled
ifDisabled
ifEnabled.......

callbacks .... Hier ist die Plugin-Funktion 

$('input').iCheck({ 
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});

Hier ist was ich versucht habe ..

$('input').on('ifChecked', function(event){
$(".hide").toggle();
});

html

<input type="checkbox">
<div class"hide" style="display:none">Hi there</div>
45
user3006683

Für diejenigen, die damit zu kämpfen haben:

const value = $('SELECTOR').iCheck('update')[0].checked;

Dies gibt direkt true oder false als boolean zurück.

49
Sercan Ozdemir

sie können Wert von Checkbox und Status durch erhalten 

$('.i-checks').on('ifChanged', function(event) {
    alert('checked = ' + event.target.checked);
    alert('value = ' + event.target.value);
});
22
grud phunsanit

Überprüfen Sie dies :

var checked = $(".myCheckbox").parent('[class*="icheckbox"]').hasClass("checked");

if(checked) {
  //do stuff
}
20
Mohamed Ramrami

Sie müssen nur die Rückrufe aus der Dokumentation verwenden: https://github.com/fronteed/iCheck#callbacks

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});
14
user1883000

Alle Rückrufe und Funktionen sind hier dokumentiert: http://fronteed.com/iCheck/#usage

$('input').iCheck('check'); — change input's state to checked
$('input').iCheck('uncheck'); — remove checked state
$('input').iCheck('toggle'); — toggle checked state
$('input').iCheck('disable'); — change input's state to disabled
$('input').iCheck('enable'); — remove disabled state
$('input').iCheck('indeterminate'); — change input's state to indeterminate
$('input').iCheck('determinate'); — remove indeterminate state
$('input').iCheck('update'); — apply input changes, which were done outside the plugin
$('input').iCheck('destroy'); — remove all traces of iCheck
9
Evalds Urtans

Ich habe etwas einfaches geschrieben:

Wenn Sie icheck wie folgt initialisieren:

$('input').iCheck({
    checkboxClass: 'icheckbox_square-blue',
    radioClass: 'iradio_square-blue',
    increaseArea: '20%' // optional
});

Fügen Sie diesen Code darunter hinzu:

$('input').on('ifChecked', function (event){
    $(this).closest("input").attr('checked', true);          
});
$('input').on('ifUnchecked', function (event) {
    $(this).closest("input").attr('checked', false);
});

Danach können Sie den Status des ursprünglichen Kontrollkästchens leicht finden .. Ich habe diesen Code für die Verwendung von icheck in gridView geschrieben und auf den Status von Server-Seite über C # zugegriffen.

Finden Sie einfach Ihre checkBox aus ihrer id .

6
Sunny

Um zu wissen, ob das Kontrollkästchen iCheck aktiviert ist

var isChecked = $("#myicheckboxid").prop("checked");
5
Ram Pratap

Verwenden Sie diesen Code für iCheck: 

$('.i-checks').iCheck({
    checkboxClass: 'icheckbox_square-green',
    radioClass: 'iradio_square-green',
}).on('ifChanged', function(e) {
    // Get the field name
    var isChecked = e.currentTarget.checked;

    if (isChecked == true) {

    }
});
4

Anruf

element.iCheck('update');

Um das aktualisierte Markup für das Element abzurufen

3
Shareef

Verwenden Sie den folgenden Code, um zu prüfen, ob iCheck aktiviert ist oder keine Einzelmethode verwendet.

$('Selector').on('ifChanged', function(event){

    //Check if checkbox is checked or not
    var checkboxChecked = $(this).is(':checked');

    if(checkboxChecked) {
        alert("checked");
    }else{
        alert("un-checked");
    }
});
2
Imran Ali
$('input').on('ifChanged', function(event) {
             if($(".checkbox").is(":checked")) {
                $value = $(this).val();
             }

             else if($(".checkbox").is(":not(:checked)")) {
                $value= $(this).val();
             }
        });
1
User0706

Sie könnten alle Ihre Kontrollkästchen in eine übergeordnete Klasse einschließen und die Länge von .checked überprüfen.

if( $('.your-parent-class').find('.checked').length ){
  $(".hide").toggle();
}
0
shroy

das funktioniert für mich ... probiere es aus

// Check #x
$( "#x" ).prop( "checked", true );
 
// Uncheck #x
$( "#x" ).prop( "checked", false );

0
Monzur

Verwenden Sie diese Methode:

$(document).on('ifChecked','SELECTOR', function(event){
  alert(event.type + ' callback');
});
0
maverabil