Jquery复选框多功能

时间:2012-06-28 11:59:26

标签: jquery function checkbox

我遇到以下两个jquery脚本的问题

$(document).ready(function() {
    var $checkboxes = $("#table_pdf_view input[type=checkbox]");
    $checkboxes.on('change', function() {
        var ids = $checkboxes.filter(':checked').map(function() {
            return this.id;
        }).get().join(',');
        $('#multi_client_id').val(ids);
    });
});
//-->
<!--
$(document).ready(function(){ // 1
    // 2
    $(':checkbox.selectall').on('click', function(){
        // 3
        $(':checkbox[name=' + $(this).data('checkbox-name') + ']').prop("checked", $(this).prop("checked"));

    });

});

两者都能完美地完成。第一个进入#table_pdf_view,如果选中复选框,则将其id返回到隐藏输入#multi_client_id

第二个是全选复选框。选中时选中具有相同名称的所有复选框。全选复选框位于#table_pdf_view之外。

问题是当我使用select all复选框时,返回到隐藏输入的值不正确。它只返回select all复选框的id,而不是其他复选框的id,我不知道为什么。

1 个答案:

答案 0 :(得分:0)

发生这种情况的原因是因为Select All复选框也是div中使用此选择器的复选框:

  var $checkboxes = $("#table_pdf_view input[type=checkbox]");

您需要将其移出该div,或更改获取所有复选框的方式。

例如,如果您查看以下页面,它会告诉您如何忽略某个复选框:

jQuery - How to select all checkboxes EXCEPT a specific one?

希望这有帮助。

更新

以下是工作版本:

  //Handle Multi Download
  $(document).ready(function() {
  var $checkboxes = $('#table_pdf_view input:checkbox:not("#sa_download")');
  $checkboxes.on('change', function() {
        var ids = $checkboxes.filter(':checked').map(function() {
        return this.id;
    }).get().join(',');
    $('#multi_client_id').val(ids);
  });
  });


  $(document).ready(function(){ // 1
   // 2
       $(':checkbox.selectall').on('click', function(){
       // 3
           $(':checkbox[name=' + $(this).data('checkbox-name') + ']').prop("checked", $(this).prop("checked"));
           $(':checkbox[name=' + $(this).data('checkbox-name') + ']').trigger("change");
       });

   });