复选框单击脚本 - [SHIFT]选中/取消选中范围,[CTRL]选中/取消选中全部 - 基于选择名称?

时间:2011-03-15 15:44:53

标签: javascript jquery

有人知道现成的脚本或插件提供:

-Shift click for check/uncheck all in range
-CTRL click to select or unselect all

这可以解决检查输入'名称'(而不是页面上的所有内容或div中的所有内容):

input[name='user_group[]']
input[name='record_group[]']

我一直在使用几个脚本(javascript和jQuery),但它们基于div或表中的所有复选框,而且我不够聪明,不能自己滚动或修改另一个脚本。谷歌搜索这个有点困难(我认为有太多常用术语)......

非常感谢!

2 个答案:

答案 0 :(得分:2)

我开始玩这个脚本,虽然它缺少一个CTRL + Click功能(选择all / none控件)。

在原始形式中,它适用于页面上的所有复选框。我更改了“$('input [type = checkbox]')。shiftClick();” linke to“$(”input [name ='selected_employees []']“)。shiftClick();”而据我所知,它现在似乎只对单个复选框组有效。

唯一的缺陷(根据我的要求)是没有CTRL + Click功能来切换检查或取消选中组中的所有复选框。

<script type="text/javascript">
  $(document).ready(function() {
    // shiftclick:  http://sneeu.com/projects/shiftclick/
    // This will create a ShiftClick set of all the checkboxes on a page.
    $(function() {
        $("input[name='selected_employees[]']").shiftClick();
        // $('input[type=checkbox]').shiftClick();
    });

    (function($) {
        $.fn.shiftClick = function() {
            var lastSelected;
            var checkBoxes = $(this);

            this.each(function() {
                $(this).click(function(ev) {
                    if (ev.shiftKey) {
                        var last = checkBoxes.index(lastSelected);
                        var first = checkBoxes.index(this);

                        var start = Math.min(first, last);
                        var end = Math.max(first, last);

                        var chk = lastSelected.checked;
                        for (var i = start; i < end; i++) {
                            checkBoxes[i].checked = chk;
                        }
                    } else {
                        lastSelected = this;
                    }
                })
            });
        };
    })(jQuery);
  });
</script>

答案 1 :(得分:-1)

我相信这应该有用!

jsFiddle上的

工作演示http://jsfiddle.net/SXdVs/3/

var firstIndex = null;

$(":checkbox").click(function(e) {
    $this = $(this);
    if (e.ctrlKey) {
        if ($this.is(":checked")) {
          $("input[name='"+ $this.attr("name") +"']").attr("checked", "checked");
        } else {
          $("input[name='"+ $this.attr("name") +"']").removeAttr("checked");
        }
    } else if (e.shiftKey) {
        $items = $("input[name='"+ $this.attr("name") +"']");
        if (firstIndex == null) {
            firstIndex = $items.index($this);
        } else {
            var currentIndex = $items.index($this);
            var high = Math.max(firstIndex,currentIndex);
            var low = Math.min(firstIndex,currentIndex);

            if ($this.is(":checked")) {
                $items.filter(":gt("+ low +"):lt("+ high +")").attr("checked", "checked");
            } else {
                $items.filter(":gt("+ low +"):lt("+ high +")").removeAttr("checked");
            }

            firstIndex = null;
        }
    } 
});