我在 bootstrap 中使用 iCheck 作为复选框样式,但我遇到了一些问题,我无法选中/取消选中所有,并且 dotn 工作及时刷新数据表,需要刷新页面,或者页面刷新 itslef。
和 premium 或 public 中的复选框,当我选择它时,它将保持选中状态,并且在我重新加载页面后,
<div class="table-responsive">
<table class="table">
<!-- Start Header -->
<thead>
<tr>
<th>
<label class="checkbox checkbox-inline">
<input type="checkbox" name="file_id" value="0">
</label>
</th>
<th>Text Name</th>
<th>Sixe Date</th>
<th>Created Date</th>
<th>Something</th>
<th>Premium</i>
</th>
<th>Public</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<label class="checkbox checkbox-inline">
<input id="check" type="checkbox" name="file_id">
</label>
</th>
<td>Something</td>
<td>Size</td>
<td>Date</td>
<td>Name</td>
<td>
<label class="checkbox checkbox-inline">
<input type="checkbox" name="file_premium_only" </label>
</td>
<td>
<label class="checkbox checkbox-inline">
<input type="checkbox">
</label>
</td>
</tr>
<tr>
<th scope="row">
<label class="checkbox checkbox-inline">
<input id="check" type="checkbox" name="file_id">
</label>
</th>
<td>Something</td>
<td>Size</td>
<td>Date</td>
<td>Name</td>
<td>
<label class="checkbox checkbox-inline">
<input type="checkbox" name="file_premium_only" </label>
</td>
<td>
<label class="checkbox checkbox-inline">
<input type="checkbox">
</label>
</td>
</tr>
</table>
</div>
<!-- /.table-responsive -->
在这里你可以看到codepen的例子:
最佳答案
您可以使用 ifToggled
iCheck 事件,如果选中/未选中,则使用 check
和 uncheck
方法在其他行中相应地执行操作。
引用:
https://github.com/fronteed/iCheck#callbacks
https://github.com/fronteed/iCheck#methods
旁注:我为全选检查设置了一个特定的类all
,并为每行检查设置了一个特定的类selector
,避免了多个id值。
代码:
jQuery(document).ready(function ($) {
$('input').iCheck({
checkboxClass: 'icheckbox_flat-pink',
radioClass: 'iradio_flat-pink'
});
$('input.all').on('ifToggled', function (event) {
var chkToggle;
$(this).is(':checked') ? chkToggle = "check" : chkToggle = "uncheck";
$('input.selector:not(.all)').iCheck(chkToggle);
});
});
关于javascript - iCheck复选框全选,并刷新数据表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32994513/