Question

如果单击“全选”复选框，我会尝试选择页面上的所有复选框，我正在使用jquery，如下所示：

选择和取消选中所有复选框的代码是：

function selectAll() {
    $('.selectedId').attr('checked', isChecked('selectall'));
}

function isChecked(checkboxId) {
    var id = '#' + checkboxId;
    return $(id).is(":checked");
}

在坚持了一天之后，我仍然不确定为什么我不能让它工作。请帮忙

Answer 1

你为什么不这样做？它更清晰可读

$('#selectall').click(function () {
    $('.selectedId').prop('checked', this.checked);
});

$('.selectedId').change(function () {
    var check = ($('.selectedId').filter(":checked").length == $('.selectedId').length);
    $('#selectall').prop("checked", check);
});

DEMO

Answer 2

Your fiddle works after I made 3 fixes：

导入jQuery（左上角菜单）
添加缺少的isChecked函数
使用prop代替attr来检查方框

Answer 3

这是因为方法selectAll在全球范围内无法使用。

在左侧面板Frameworks and Extensions的第二个下拉列表中，选择no -wrap head/body它将正常工作。

选择默认onload的原因，当选择onload时，所有输入的脚本都包含在匿名函数中，如下所示。它将使selectAll函数成为匿名函数内的本地方法，因此使用全局作用域的onclick事件处理程序将无法访问导致Uncaught ReferenceError: selectAll is not defined错误的方法。

$(window).load(function(){
    //Entered script
});

演示：Fiddle

<强>更新但你可以将其简化为

$(function(){
    $('#selectall').click(function(i, v){
        $('.selectedId').prop('checked', this.checked);
    });

    var checkCount = $('.selectedId').length;
    $('.selectedId').click(function(i, v){
        $('#selectall').prop('checked',$('.selectedId:checked').length  == checkCount)
    });
});

并从输入元素中删除所有onclick处理程序，如this demo

所示

Answer 4

使用此...

$('#selectall').on('click', function() {
    $('.selectedId').attr('checked', $(this).is(":checked"));
});

请参阅此DEMO

Answer 5

$(document).ready(function () {
    $('#selectall').click(function () {
        $('.selectedId').prop('checked', $(this).is(":checked"));
    });
});

more Optimized

Answer 6

这应该适合你。

$(document).ready(function () {
    $('#selectall').click(function () {
         var checked = $(this).is(':checked');            
        $('.selectedId').each(function () {
            var checkBox = $(this);               
            if (checked) {
                checkBox.prop('checked', true);                
            }
            else {
                checkBox.prop('checked', false);                
            }
        });

    });
});

JsFiddle http://jsfiddle.net/Ra3uL/

Answer 7

假设父复选框有一个mainselect类，所有子元素都有一个childselect类

然后选择父级将选择所有复选框，反之亦然，使用以下代码：

$('#mainselect').live('change',function(){
if($(this).attr('checked') == 'checked') {
    $('.childselect').attr('checked','checked');
} else {
    $('.childselect').removeAttr('checked');
}
});

Answer 8

$（函数（）{

// add multiple select / deselect functionality
$("#selectall").click(function () {
      $('.case').attr('checked', this.checked);
});

// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){

    if($(".case").length == $(".case:checked").length) {
        $("#selectall").attr("checked", "checked");
    } else {
        $("#selectall").removeAttr("checked");
    }

});

}）;

Answer 9

@letiagoalves解决方案的一个小增强功能，如果您的复选框具有与点击事件相关的特定处理。 OP没有要求，但我过去必须做的事情。基本上，它不是直接设置每个从属复选框的checked属性，而是将每个从属复选框的已检查状态与selectall复选框进行比较，并对处于相反状态的复选框触发click事件。

$('#selectall').click(function () {
    var parentState = $(this).prop('checked');
    $('.selectedId').each(function() {
        if ($(this).prop('checked') !== parentState) {
            $(this).trigger("click");
        }
});
});

DEMO：https://jsfiddle.net/jajntuqb/2/

Answer 10

您可以在select all复选框上将click函数添加到click事件：

if not exists(select * from tbl1 where id = 1)
   create table tbl2()
   drop tbl1
go

然后这个功能应该足以选择全部或取消全部。

$('#chk-all-items').click(selectAll);

Answer 11

更具体的解决方案：

＆＃13;

$(document).ready(function(){
  $('#checkAll').on('click', function ( e ) {
    $('input[name="chck_box[]"]').prop('checked', $(this).is(':checked'));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th><input type="checkbox" id="checkAll"></th>
    <th>Name</th>
    <th>Last</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="chck_box[]" value="1"></td>
      <td>Joe</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="chck_box[]" value="2"></td>
      <td>John</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="chck_box[]" value="3"></td>
      <td>Bill</td>
      <td>White</td>
    </tr>
  </tbody>
</table>

＆＃13;

Jquery“全选”复选框

11 个答案: