jqueryselect所有checkbox
我有一系列的checkbox，通过ajax一次加载100个。
我需要这个jquery让我有一个button时，按全屏检查。 如果更多的被加载，并按下button，也许切换所有closures，然后再次按下切换回来。
这是我的，显然它不适合我。
$(function () { $('#selectall').click(function () { $('#friendslist').find(':checkbox').attr('checked', this.checked); }); }); button是#selectall ，checkbox是类.tf ，并且它们都位于名为#check的父级div中，在名为#friend的div内部，名为#friendslist的div
例：
<div id='friendslist'> <div id='friend'> <div id='check'> <input type='checkbox' class='tf' name='hurr' value='durr1'> </div> </div> <div id='friend'> <div id='check'> <input type='checkbox' class='tf' name='hurr' value='durr2'> </div> </div> <div id='friend'> <div id='check'> <input type='checkbox' class='tf' name='hurr' value='durr3'> </div> </div> </div> <input type='button' id='selectall' value="Select All">
我知道我正在重新访问一个旧的主题，但当这个问题被问到时，这个页面就会显示在Google的最重要的结果之一。 我重新审视这个，因为在jQuery 1.6及以上版本中，prop（）应该用于“checked”状态，而不是attr（），true或false被传递。 更多信息在这里 。
例如，亨里克的代码现在应该是：
$(function () { $('#selectall').toggle( function() { $('#friendslist .tf').prop('checked', true); }, function() { $('#friendslist .tf').prop('checked', false); } ); });
$('#friendslist .tf')
这个select器将适合您的需求
使用jQuery的切换function。 然后，您还可以执行您可能想要执行的任何其他更改，例如更改button的值以显示“全部选中”或“取消全选”。
$(function () { $('#selectall').toggle( function() { $('#friendslist .tf').attr('checked', 'checked'); }, function() { $('#friendslist .tf').attr('checked', ''); } ); });
一个非常简单的检查/取消全部不需要循环
<input type="checkbox" id="checkAll" /> Check / Uncheck All <input type="checkbox" class="chk" value="option1" /> Option 1 <input type="checkbox" class="chk" value="option2" /> Option 2 <input type="checkbox" class="chk" value="option3" /> Option 3
而javascript（jQuery）占了checkbox值“undefined”
** 更新 – 使用.prop（） **
$("#checkAll").change(function(){ var status = $(this).is(":checked") ? true : false; $(".chk").prop("checked",status); });
** 以前的build议 – 可能无法使用 **
$("#checkAll").change(function(){ var status = $(this).attr("checked") ? "checked" : false; $(".chk").attr("checked",status); });
或者使用.prop（）将下一篇文章的build议组合成一行
$("#checkAll").change(function(){ $(".chk").attr("checked",$(this).prop("checked")); });
也许试试这个：
$(function () { $('#selectall').click(function () { $('#friendslist .tf').attr('checked', this.checked); }); });
这是我如何切换checkbox
$(document).ready(function() { $('#Togglebutton').click(function() { $('.checkBoxes').each(function() { $(this).attr('checked',!$(this).attr('checked')); }); }); });
<div class="control-group"> <input type="checkbox" class="selAllChksInGroup"> All <input type="checkbox" value="NE"> Nebraska <input type="checkbox" value="FL"> Florida </div> $(document).ready(function(){ $("input[type=checkbox].selAllChksInGroup").on("click.chkAll", function( event ){ $(this).parents('.control-group:eq(0)').find(':checkbox').prop('checked', this.checked); }); });
我无法得到最后一个例子为我工作。 查询checkbox状态的正确方法显然是：
var status = $(this).prop("checked");
并不是
var status = $(this).attr("checked") ? "checked" : false;
如上。
看到jQuery接收checkbox的状态
所以“检查”是一个蹩脚的属性; 在许多浏览器中，它不能按预期工作:-(尝试做：
$('#friendslist').find(':checkbox') .attr('checked', this.checked) .attr('defaultChecked', this.checked);
我知道设置“defaultChecked”没有任何意义，但尝试一下，看看是否有帮助。
它适用于我（IE浏览器，Safari浏览器，火狐）只是改变你的this.checked到“检查”。
$(function() { $('#selectall').click(function() { $('#friendslist').find(':checkbox').attr('checked', 'checked'); }); });
你可以试试这个：
$(function () { $('#selectall').click(function () { $('#friendslist input:checkbox').attr('checked', checked_status); }); });
// checked_status = true / false – 视情况而定，或通过variables设置
假设#selectall是一个checkbox本身的状态，你想复制到所有其他checkbox？
$(function () { $('#selectall').click(function () { $('#friendslist input:checkbox').attr('checked', $(this).attr('checked')); }); });
尝试这个
var checkAll = function(){ var check_all = arguments[0]; var child_class = arguments[1]; if(arguments.length>2){ var uncheck_all = arguments[2]; $('#'+check_all).click(function (){ $('.'+child_class).attr('checked', true); }); $('#'+uncheck_all).click(function (){ $('.'+child_class).attr('checked', false); }); $('.'+child_class).click(function (){ var checkall_checked = true; $('.'+child_class).each(function(){ if($(this).attr('checked')!=true){ checkall_checked = false; } }); if(checkall_checked == true){ $('#'+check_all).attr('checked', true); $('#'+uncheck_all).attr('checked', false); }else{ $('#'+check_all).attr('checked', false); $('#'+uncheck_all).attr('checked', true); } }); }else{ $('#'+check_all).click(function (){ $('.'+child_class).attr('checked', $(this).attr('checked')); }); $('.'+child_class).click(function (){ var checkall_checked = true; $('.'+child_class).each(function(){ if($(this).attr('checked')!=true){ checkall_checked = false; } }); $('#'+check_all).attr('checked', checkall_checked); }); } };
要“全部检查”和“全部取消”是相同的checkbox
checkAll（“checkall_id”，“child_checkboxes_class_name”）;
要“全选”和“全部取消”是单独的checkbox
checkAll（“checkall_id”，“child_checkboxes_class_name”，“uncheckall_id”）;
这是我如何实现的。
function SelectAllCheckBoxes(); { $('#divSrchResults').find(':checkbox').attr('checked', $('#chkPrint').is(":checked")); }
以下火线以上。
<input type=checkbox id=chkPrint onclick='SelectAllCheckBoxes();' />
点击chkPrint时，网格divSrchResults'中的每个checkbox将根据chkPrint的状态进行选中或取消选中。
当然，如果你需要高级function，如取消勾选标题checkbox时，其他checkbox已被取消选中，您需要编写另一个函数。
我创build了一个我在所有项目中使用的函数。 这只是初稿，但也许会有所帮助：
function：
function selectAll(wrapperAll, wrapperInputs) { var selectAll = wrapperAll.find('input'); var allInputs = wrapperInputs.find('input'); console.log('Checked inputs = ' + allInputs.filter(':not(:checked)').length); function checkitems(allInputs) { //If all items checked if (allInputs.filter(':not(:checked)').length === 0) { console.log('Function: checkItems: All items checked'); selectAll.attr('checked', true); } else { console.log('Function: checkItems: Else all items checked'); selectAll.attr('checked', false); } } checkitems(allInputs); allInputs.on('change', function () { checkitems(allInputs) }); selectAll.on('change', function () { if (this.checked) { console.log('This checkbox is checked'); wrapperInputs.find(':checkbox').attr('checked', true); } else { console.log('This checkbox is NOT checked'); wrapperInputs.find(':checkbox').attr('checked', false); } }); }
它接受input包裹的2个参数，你可以使用这个参数：
$(function () { var wrapperAll = $('.selectallinput'); var wrapperInputs = $('.inputs'); selectAll(wrapperAll, wrapperInputs); });
查看演示： http : //jsfiddle.net/cHD9z/
<input type="checkbox" onclick="toggleChecked(this.checked)"> Select / Deselect All Now here are two versions of the toggleChecked function dependent on the semantics of your document. The only real difference is the jQuery selector for your list checkboxes: 1: All checkboxes have a class of “checkbox” (<input type=”checkbox” class=”checkbox” />) function toggleChecked(status) { $(".checkbox").each( function() { $(this).attr("checked",status); }) } 2: All the checkboxes are contained within a div with an arbitary id: <div id="checkboxes"> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> </div> In this case the function would look like this: function toggleChecked(status) { $("#checkboxes input").each( function() { $(this).attr("checked",status); }) Have fun!
这可能适用于（选中/未选中）select所有情况：
$(document).ready(function(){ $('#selectall').click(function () { $("#friendslist .tf").attr("checked",function(){return $(this).attr("checked") ? false : true;}); }); });
目前接受的答案不适用于jQuery 1.9+。 （相当严重）重载的.toggle()函数的事件处理方面在该版本中被删除，这意味着尝试调用.toggle(function, function)只会切换元素的显示状态。
我会build议做这样的事情，而不是：
$(function() { var selectAll = $('#selectall'); selectAll.on('click', function(e) { var checked = !(selectAll.data('checked') || false); $('#friendslist .tf').prop('checked', checked); selectAll.data('checked', checked); }); });
这使用一个常规的点击事件处理程序，加上一个数据属性来跟踪“切换”的状态，并反转每一次点击。
下面是我写的一个基本的jQuery插件，用于select页面上的所有checkbox，除了用作切换的checkbox/元素。 这当然可以修改以适应您的需求：
(function($) { // Checkbox toggle function for selecting all checkboxes on the page $.fn.toggleCheckboxes = function() { // Get all checkbox elements checkboxes = $(':checkbox').not(this); // Check if the checkboxes are checked/unchecked and if so uncheck/check them if(this.is(':checked')) { checkboxes.prop('checked', true); } else { checkboxes.prop('checked', false); } } }(jQuery));
然后只需在checkbox或button元素上调用该函数：
// Check all checkboxes $('.check-all').change(function() { $(this).toggleCheckboxes(); });
当你通过AJAX添加和删除更多的checkbox时，你可能想用这个来代替.change（）：
// Check all checkboxes $(document).on('change', '.check-all', function() { $(this).toggleCheckboxes(); });
