web-dev-qa-db-ja.com

チェックボックスがオンになっているかどうかをチェックする

チェックボックスのカスタマイズにiCheckプラグインを使用しています。 one or moreチェックボックスがオンの場合、特定のテキストを表示し、チェックされていない場合はテキストを非表示にする必要があります。

私が現在持っているコードは、最初のクリックでテキストを表示しますが、さらに2回クリックしない限り、非表示にしません。複数のチェックボックスがあり、チェックされている場合はテキストを表示し、そうでない場合はテキストを非表示にします。誰にもアイデアはありますか？プラグインには次のものがあります。

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

コールバック....ここにプラグイン関数があります

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

ここに私が試したものがあります。

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

html

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

これに苦労している人のために：

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

これは、trueとしてfalseまたはbooleanを直接返します。

57
Sercan Ozdemir

チェックボックスとステータスの値を取得するには

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

これをチェックして ：

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

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

すべてのコールバックと関数はここに文書化されています： 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
13
Evalds Urtans

ドキュメントのコールバックを使用するだけです： https://github.com/fronteed/iCheck#callbacks

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

私はいくつかの簡単なことを書きました：

icheckを次のように初期化する場合：

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

その下にこのコードを追加します。

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

この後、元のチェックボックスの状態を簡単に見つけることができます。 icheckでgridViewを使用するためにこのコードを記述し、C＃によってサーバー側からその状態にアクセスしました。

idからcheckBoxを見つけるだけです。

6
Shakti

ICheckボックスがチェックされているかどうかを知るには

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

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
Abdus Salam Azad

コール

element.iCheck('update');

要素の更新されたマークアップを取得するには

3
Shareef

次のコードを使用して、iCheckがチェックされているかどうか、単一のメソッドを使用していないかどうかを確認します。

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

すべてのチェックボックスを親クラスでラップし、.checked。の長さを確認できます。

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

これは私のために働く...それを試してください

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