jquery - 如何实现“全选”复选框并在 HTML 中显示 div 中的值？

Question

$(function () {
    //it is use for selectall and if any not checked so selectall is unchecked 
    var checkall = $('#checkall');
    var boxes = $('input[type="checkbox"]').not(checkall);

    checkall.click(function () {
        boxes.attr('checked', this.checked);
    });
    boxes.change(function () {
        checkall[0].checked = this.checked && boxes.filter(':checked').length === boxes.length;
    });

    //this is for show the value of selected checkbox in the div id+"checked"
    $('input:checkbox').click(function () {

        var $checked = $('#checked');
        $checked.html('');

        $('input:checkbox').each(function (index) {
            if ($(this).is(':checked')) {
                $checked.append('<div>' + $('label[for="' + $(this).attr('id') + '"]').text() + '</div>');
            }
        });
    });
});

Answer 1

你从来没有确切地说出你的问题是什么......但是这段代码应该是你正在寻找的。注意 jQuery 的 .prop() 而不是 .attr()

$(document).ready(function () {
  //it is use for selectall and if any not checked so selectall is unchecked 
  var checkall = $('#checkall');
  var boxes = $('input[type="checkbox"]').not(checkall);

  checkall.click(function () {
    var checked = $(this).is(':checked');
    boxes.prop('checked', checked);
  });

  boxes.change(function () {
    checkall[0].checked = this.checked && boxes.filter(':checked').length === boxes.length;
  });

  //this is for show the value of selected checkbox in the div id+"checked"
  $('input:checkbox').click(function () {

    var $checked = $('#checked');
    $checked.html('');

    $('input:checkbox').each(function (index) {
        if ($(this).is(':checked')) {
            $checked.append('<div>' + $(this).attr('id') + '</div>');
        }
    });
  });
});