javascript - 单击父复选框时获取子复选框的详细信息

Question

我有一组带有全选和取消全选选项的复选框...是否可以在单击全选选项时获取与每个主复选框相关联的子复选框的详细信息（id、类、名称）。

http://jsfiddle.net/nBh4L/2/

$(function(){
$('.selectAll').on('click', function(evt){
var group = $(this).attr('data-group'),
    isChecked = !!($(this).prop('checked'));
$('input[value="' + group + '"]').prop('checked', isChecked);    
})

$('.entity').on('click', function(evt){
var group = $(this).attr('value'),
    siblings = $('input[value="' + group + '"]'),
    isChecked = true;
siblings.each(function(idx, el){
  if(!$(el).prop('checked')) {
    isChecked = false;
    return;
  }
})

$('.selectAll[data-group="' + group + '"]').prop('checked', isChecked);

})
})​

Answer 1

试试这个查看演示：http ://codebins.com/bin/4ldqp87

$('.selectAll').on('click', function(evt){
    var group = $(this).attr('data-group'),
        isChecked = !!($(this).prop('checked'));
    $('input[value="' + group + '"]').prop('checked', isChecked);
    siblings = $('input[value="' + group + '"]');
      siblings.each(function(){
          alert($(this).attr('name'));
      })     
  })

Answer 2

我会使用以下内容：

$(document).ready(function() {
    "use strict";
    $("input.select").on("click", function() {
        var $entities = $(this).siblings().find("input.entity");
        $entities.prop("checked", $(this).is(":checked"));

        //      This would also work if you want an array with ids.
        //      console.log($entities.map(function() {
        //          return $(this).attr("id");
        //      }));

        $entities.each(function() {
            console.log($(this).attr("id"));
        });
    });

    $("input.entity").on("click", function() {
        var $entityGroup = $(this).siblings().andSelf();
        $(this).parent().siblings("input.select").prop("checked", $entityGroup.length === $entityGroup.filter(":checked").length);
    });
});

这只是几个小时前我对您的另一个问题的回答的一个小补充。

        $entities.each(function() {
            console.log($(this).attr("id"));
        });

上面将不同实体的 id 记录到控制台。希望您了解如何使用和获取此示例中的属性。

这也是一个选项，如果你想把它全部放在一个数组中：

        console.log($entities.map(function() {
            return $(this).attr("id");
        }));

jsFiddle 示例