Jquery 一些有用的代码片段
1:点击一个全选按钮下面的按钮全都选中
$(function(){
selectable = $(":checkbox.selectable");
$("#selectall").click(function(){
$(this).attr("checked",true);
selectAll();
});
// describing how many are checked
selectable.click(changeNumFilters);
// calculate how many are initially checked
changeNumFilters();
})
function selectAll(){
var checked = $("#selectall").attr("checked");
selectable.each(function(){
var subChecked = $(this).attr("checked");
if(subChecked != checked){
$(this).attr("checked",true);
}
});
changeNumFilters();
}
function changeNumFilters()
{
// this needs to be checked on every call
// since the length can change with every click
var size = $(":checked.selectable").length;
if (size > 0)
$("#selectedCount").html(size);
else
$("#selectedCount").html("0");
}
-----------------------------------------
2:
[JQuery]選取所有checkbox和判斷是否全部checkbox已經被勾選
<form>
<input type="checkbox" id="checkAll">quanxian
<hr/>
<input type="checkbox" name="chkPerson">hello<br/>
<input type="checkbox" name="chkPerson">ni<br/>
<input type="checkbox" name="chkPerson">hao<br/>
</form>
后端代码:
$(function(){
$('#checkAll').change(function() {
//get all checkbox which want to change
var checkboxes = $(this).closest('form').find('input[name="chkPerson"]:checkbox');
if($(this).is(':checked')) {
checkboxes.prop('checked', 'checked');
} else {
checkboxes.removeAttr('checked');
}
});
$('input[name="chkPerson"]').change(function(){
checkOrRemoveCheckAll();
});
});
function checkOrRemoveCheckAll(){
if($('input[name="chkPerson"]:checked').length == $('input[name="chkPerson"]').length)
{
$('#checkAll').prop("checked", "checked");
}
else
{
$('#checkAll').removeAttr("checked");
}
}