使用jquery檢查icheck上的所有checboxes

我試圖在primary checkbox的檢查上檢查/取消選中secondary checkboxes。但我的jQuery功能不起作用。使用jquery檢查icheck上的所有checboxes

HTML代碼：

<table id="tab" class="table"> 
    <tr> 
    <td> 
     <input name="feature-1" class="ExtraCheckBox" type="checkbox"> Primary 
    </td> 
    <td> 
     <input name="feature-1" class="ChildCheckBox" type="checkbox"> Secondary 
     <input name="feature-1" class="ChildCheckBox" type="checkbox"> Secondary 
    </td> 
    </tr> 
</table>

jQuery代碼：

$(document).on('change', '.ExtraCheckBox', function() { 
    var checked = $(".ExtraCheckBox").closest('div.icheckbox_square-grey').hasClass("checked"); 
    console.log(checked); 

    if (checked) { 
    $("#tab > tr >td.ChildCheckBox").each(function() { 
     $(this).prop("checked", true); 
    }); 
    } else { 
    $("#tab > tr >td.ChildCheckBox").each(function() { 
     $(this).prop("checked", false); 
    }); 
    } 

});

請找JS演示小提琴這裏：Link

任何建議，請！

來源

2017-08-03 06011991

$（this）.iCheck（'check'）;和$（this）.iCheck（'uncheck'）;應該幫助 –

https://github.com/fronteed/icheck#methods –

@MehravishTemkar：檢查參考鏈接。 – 06011991

使用下面的代碼：

$('input.ExtraCheckBox').on('ifToggled', function(event){ 
    $('input.ChildCheckBox').iCheck('toggle'); 
});

與下面的代碼替換此代碼：

$(document).on('change', '.ExtraCheckBox', function() { 
    var checked = $(".ExtraCheckBox").closest('div.icheckbox_square-grey').hasClass("checked"); 
    console.log(checked); 
------- and so on

這是一個自定義庫，它有它自己的事件處理功能。使用它們。

下面是該庫和文檔的鏈接：link。

來源

2017-08-03 11:39:46

點擊複選框後，'checked'類將添加到'div'標籤。我已經嘗試過你的功能，它沒有工作:( – 06011991

@ 06011991檢查我的更新代碼。 –

是的，它的工作。謝謝:) – 06011991

這個很簡單！您的<td>元素都沒有一類ChildCheckBox。

試試這個：

$(".ExtraCheckBox").on('click', function() { 
    var checked = $(this).is(":checked"); 

    if (checked) { 
    $("input.ChildCheckBox").each(function() { 
     $(this).click(); 
    }); 
    } else { 
    $("input.ChildCheckBox").each(function() { 
     $(this).click(); 
    }); 
    } 
});

看到它在這裏工作http://jsbin.com/sawezogiju/edit?html,js,console,output

來源

2017-08-03 11:33:44 delboy1978uk

這應該工作... – Eedoh

我只是試過。這是行不通的:( – 06011991

您的jquery代碼工作正常，檢查更新的小提琴鏈接[這裏] [1] 問題是與'iCheck'插件。我認爲這是不響應'點擊'或' change'事件 [1]：http://jsfiddle.net/yzyk2dqn/3/ –

嘗試類似這個。

$('input.ExtraCheckBox').on('ifClicked', function() { 
    var checked=$(this).is(':checked'); 
    if(checked){ 
      $('.ChildCheckBox').iCheck('uncheck'); 
    }else{ 
      $('.ChildCheckBox').iCheck('check'); 
    } 
});

以下是更新的鏈接：jsfiddle.net/yzyk2dqn/9/

來源

2017-08-03 11:56:50 CCoder

您可以直接使用I檢查插件提供的回調和方法。

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

$('.ExtraCheckBox').on('ifChecked', function() { 

    $(".ChildCheckBox").iCheck('check'); 

}); 


$('.ExtraCheckBox').on('ifUnchecked', function() { 

    $(".ChildCheckBox").iCheck('uncheck'); 

});

希望這會有所幫助。查看我的小提琴版本 http://jsfiddle.net/kajalc/6mmypwgs/

來源

2017-08-03 11:58:53 Kajal

使用jquery檢查icheck上的所有checboxes

回答

相關問題