我如何修改我的代码以在selectall上显示按钮并在选择selectall时隐藏按钮。它在Firefox上工作正常,但在chrome中有问题。
$('#selectall').click(function () {
$('.selectedId').prop('checked', isChecked('selectall'));
});
$('input[type="checkbox"]').change(function () {
if ($('.selectedId:checked').length >= 1) {
if ($('#AdvancedOption').is(':hidden'))
$('#AdvancedOption').fadeIn('fast');
if ($('.selectedId:checked').length == 1) {
$('.toolbar1').fadeIn('fast');
}
else
$('.toolbar1').fadeOut('fast');
$('.toolbar2').fadeIn('fast');
}
else {
$('.toolbar1').fadeOut('fast');
$('#AdvancedOption').fadeOut('fast');
}
});
这是相关的HTML
<div id="AdvancedOption" style="display: none" class="col-md-8 col-sm-8 btn-group-sm">
<a href="#" class="btn btn-danger toolbar2 deleteAccount" title="Delete this account" role="button"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
<a href="#" class="btn btn-warning toolbar1 editTeam" title="Edit this account" role="button" style="display:none;"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
</div>
考虑以下示例:
的HTML
<ul class="chk-container">
<li>
<input type="checkbox" id="selectAll" />Select All
</li>
<li>
<input type="checkbox" name="check" value="check1" class="selectedId" />Checkbox 1
</li>
<li>
<input type="checkbox" name="check" value="check2" class="selectedId" />Checkbox 2
</li>
<li>
<input type="checkbox" name="check" value="check3" class="selectedId" />Checkbox 3
</li>
<li>
<input type="checkbox" name="check" value="check4" class="selectedId" />Checkbox 4
</li>
<li>
<input type="checkbox" name="check" value="check5" class="selectedId" />Checkbox 5
</li>
</ul>
<div id="AdvancedOption" style="display: none;" class="col-md-8 col-sm-8 btn-group-sm">
<a href="#" class="btn btn-danger toolbar2 deleteAccount" title="Delete this account" role="button">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
<a href="#" class="btn btn-warning toolbar1 editTeam" title="Edit this account" role="button" style="display: none;">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
</div>
的CSS
ul {
padding-left: 5px;
}
ul.chk-container li {
border-bottom: 1px solid #E7E7E7;
padding: 2px;
list-style-type: none;
}
jQuery的
$('input[type="checkbox"]').click(function() {
/* Check all checkboxes if 'Select All' is clicked */
if (this.id == 'selectAll') {
var isChecked = this.checked;
$('.selectedId').each(function() {
this.checked = isChecked;
});
}
/* Check / Uncheck 'Select All' checkbox if all the checkboxes are checked / unchecked */
if ($('.selectedId:checked').length == $('.selectedId').length) $('#selectAll').prop('checked', true);
else $('#selectAll').prop('checked', false);
/* Toggle controls on the basis of selected checkboxes */
if ($('.selectedId:checked').length >= 1) {
$('#AdvancedOption').fadeIn('fast');
if ($('.selectedId:checked').length == 1) {
$('.toolbar1').fadeIn('fast');
} else {
$('.toolbar1').fadeOut('fast');
$('.toolbar2').fadeIn('fast');
}
} else {
$('.toolbar1').fadeOut('fast');
$('#AdvancedOption').fadeOut('fast');
}
});
更新了演示
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句